Estou criando umas funções para o editor de texto AlloyEditor. Pórem me deparei com a necessidade de adquirir o elemento em Jquery que o cursor está presente. Só que não sei se existe alguma forma atraves do Jquery de pegar o elemento html que está meu cursor, ou pelos menos qual elemento html meu mouse clicou. Existe alguma forma de fazer isso? Se sim, Como?
3 Respostas
Minha resposta está limitada a isso:
"- pelos menos qual elemento html meu mouse clicou"
Teoria: capturar o evento click
em todo o corpo do site; retornar o elemento clicado neste evento através da propriedade .target
.
Prática:
$('body').on('click', function(event){
let elementoClicado = $(event.target);
elementoClicado.css('background-color', '#ddd');
console.log(elementoClicado); // objeto jQuery!
console.log(event.target); // objeto html
});
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, eum, iusto. Magnam reprehenderit praesentium et aperiam consectetur. Deleniti nihil minus, architecto, molestiae rem amet placeat odio numquam dolorum pariatur deserunt!</p>
</body>
</html>
Por mais que não pareça muito funcional, você pode tentar utilizar a mesma técnica com o hover
. Mas já te adianto: não fica muito legal. Talvez você consiga adaptar ao seu uso definindo bem um seletor. Mas aí vai:
$('*').hover(
function(event){ // Mouse entrou no elemento
let elementoHover = $(event.target);
elementoHover.css('background-color', '#ddd');
},
function(event){ // Mouse saiu do elemento
let elementoHover = $(event.target);
elementoHover.css('background-color', '#d00');
}
);
Leitura recomendada: W3Schools - onmouseover Event
Se já não estiver utilizando jQuery, não precisa carregar um biblioteca inteira só para isto, dá para pegar os elementos com Javascript puro mesmo:
Clicando com o mouse
document.body.onclick = function() {
console.log(event.target);
}
<div>CLICANDO NA DIV</div>
<p>CLICANDO NO P</p>
<span>CLICANDO NO SPAN</span>
<p>CLICANDO NO P</p>
Passando com o mouse
document.body.onmouseover= function() {
console.log(event.target);
}
<div>PASSANDO NA DIV
<p>PASSANDO NO P</p>
<span>PASSANDO NO SPAN</span>
<p>PASSANDO NO P</p>
</div>
-
Sabe me dizer se utilizar jQuery teria menos compatibilidade com todos os navegadores ou o jQuery encapsula o javascript de forma plena? Pergunto isso porque acho o jQuery muito pratico. Deixar de usar o jQuery tornaria meu sistema mais rápido? Essa pergunta é porque eu uso jQuery pra tudo.– Marcelo25/11/2022 às 13:26
Utilize o evento onmousemove
no body
:
var atual = null;
function mouseEventHandler(mEvent) {
var ultimo = atual;
// Internet Explorer || Demais navegadores
atual = mEvent.srcElement || mEvent.target;
if (ultimo !== atual) {
console.log('id do elemento atual:', atual.id);
}
}
document.body.onmousemove = mouseEventHandler;
<div id="div1">DIV1</div>
<p id="p1">P1</p>
<span id="span1">SPAN1</span>
The
onmousemove
property of theGlobalEventHandlers
mixin is anEventHandler
that processesmousemove
events.The
mousemove
event fires when the user moves the mouse.
Em tradução livre:
A propriedade
onmousemove
do mixinGlobalEventHandlers
é umEventHandler
que processa os eventos demousemove
.O evento
mousemove
dispara quando o usuário move o mouse.