8

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 3

9

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

7

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>

1
  • 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.
    – user37466
    25/11/2022 às 13:26
4

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>


onmousemove

The onmousemove property of the GlobalEventHandlers mixin is an EventHandler that processes mousemove events.

The mousemove event fires when the user moves the mouse.

Em tradução livre:

A propriedade onmousemove do mixin GlobalEventHandlers é um EventHandler que processa os eventos de mousemove.

O evento mousemove dispara quando o usuário move o mouse.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .