Determina quale elemento il puntatore del mouse è in cima a in Javascript

Voglio una funzione che mi dice quale elemento il cursore del mouse è finito.

Quindi, ad esempio, se il mouse dell’utente si trova su questa textarea (con id wmd-input ), chiamare window.which_element_is_the_mouse_on() sarà funzionalmente equivalente a $("#wmd-input")

DEMO

C’è una funzione davvero interessante chiamata document.elementFromPoint che fa quello che sembra.

Quello di cui abbiamo bisogno è trovare le coordinate x e y del mouse e quindi chiamarlo usando quei valori:

 var x = event.clientX, y = event.clientY, elementMouseIsOver = document.elementFromPoint(x, y); 

document.elementFromPoint

object evento jQuery

Nei nuovi browser, è ansible effettuare le seguenti operazioni:

 document.querySelectorAll( ":hover" ); 

Questo ti darà una NodeList di elementi che il mouse è attualmente in ordine di documento. L’ultimo elemento in NodeList è il più specifico, ciascuno dei precedenti dovrebbe essere un genitore, un nonno e così via.

Anche se il seguente potrebbe non rispondere alla domanda, dato che questo è il primo risultato di googling (il googler potrebbe non chiedere esattamente la stessa domanda :), spero che fornirà qualche input in più.

Ci sono in realtà due diversi approcci per ottenere una lista di tutti gli elementi che il mouse è attualmente finito (forse per i nuovi browser):

L’approccio “structual” – Albero DOM ascendente

Come nella risposta di Dherman, si può chiamare

 var elements = document.querySelectorAll(':hover'); 

Tuttavia, questo presuppone che solo i bambini si sovrappongano ai loro antenati, che di solito è il caso, ma non vero in generale, specialmente quando si tratta di SVG in cui l’elemento in rami diversi dell’albero DOM può sovrapporsi l’un l’altro.

L’approccio “visivo” – Basato sulla sovrapposizione “visiva”

Questo metodo utilizza document.elementFromPoint(x, y) per trovare l’elemento più in alto, nasconderlo temporaneamente (poiché lo ripristiniamo immediatamente nello stesso contesto, il browser non lo renderizza effettivamente), quindi continua a cercare il secondo elemento più in alto. .. Sembra un po ‘hacky, ma restituisce ciò che ci si aspetta quando ci sono, ad esempio, elementi fratelli in un albero che si occludono a vicenda. Si prega di trovare questo post per maggiori dettagli,

 function allElementsFromPoint(x, y) { var element, elements = []; var old_visibility = []; while (true) { element = document.elementFromPoint(x, y); if (!element || element === document.documentElement) { break; } elements.push(element); old_visibility.push(element.style.visibility); element.style.visibility = 'hidden'; // Temporarily hide the element (without changing the layout) } for (var k = 0; k < elements.length; k++) { elements[k].style.visibility = old_visibility[k]; } elements.reverse(); return elements; } 

Prova entrambi e controlla i loro diversi ritorni.

Gli eventi di passaggio del mouse si aprono, quindi puoi mettere un singolo listener sul corpo e aspettare che event.target , quindi prendi l’ event.target o event.srcElement :

 function getTarget(event) { var el = event.target || event.srcElement; return el.nodeType == 1? el : el.parentNode; }  
  

Il seguente codice ti aiuterà a ottenere l’elemento del puntatore del mouse. Gli elementi risultanti verranno visualizzati in console.

 document.addEventListener('mousemove', function(e) { console.log(document.elementFromPoint(e.pageX, e.pageY)); }) 

Puoi guardare il target dell’evento mouseover su un antenato adatto:

 var currentElement = null; document.addEventListener('mouseover', function (e) { currentElement = e.target; }); 

Ecco una demo.

elementFromPoint() ottiene il primo elemento nell’albero DOM. Questo non è abbastanza per le esigenze degli sviluppatori. Quindi c’è questa bella funzione:

 Document.elementsFromPoint() 

Questo restituisce una matrice di oggetti elemento sotto i punti dati.

È attualmente una funzione sperimentale che non è supportata da tutti i browser, quindi puoi usare questa risposta come fallback

 | Chrome | Firefox | IE | Opera | Safari | 43.0 | 46.0 | 10.0 | ? | No support 

Maggiori informazioni e la compatibilità del browser corrente qui: https://developer.mozilla.org/en-US/docs/Web/API/document/elementsFromPoint

L’objective mousemove DOM mousemove è l’elemento DOM più in alto sotto il cursore quando il mouse si sposta:

 (function(){ //Don't fire multiple times in a row for the same element var prevTarget=null; document.addEventListener('mousemove', function(e) { //This will be the top-most DOM element under cursor var target=e.target; if(target!==prevTarget){ console.log(target); prevTarget=target; } }); })(); 

Questo è simile alla soluzione di @Philip Walton, ma non richiede jQuery o un setInterval.

Puoi usare questo selettore per sottomettere l’object e manipolarlo come object jQuery. $(':hover').last();

Lasciatemi dire che non raccomando di usare il metodo che sto per suggerire. È molto meglio utilizzare lo sviluppo guidato dagli eventi e associare gli eventi solo agli elementi che ti interessano sapere se il mouse è finito con mouseover , mouseout , mouseenter , mouseleave , ecc.

Se assolutamente DEVE avere la capacità di sapere quale elemento il mouse è finito, avresti bisogno di scrivere una funzione che leghi l’evento mouseover a qualsiasi cosa nel DOM, e quindi memorizzi qualunque cosa l’elemento corrente sia in qualche variabile.

Potresti avere qualcosa del genere:

 window.which_element_is_the_mouse_on = (function() { var currentElement; $("body *").on('mouseover', function(e) { if(e.target === e.currentTarget) { currentElement = this; } }); return function() { console.log(currentElement); } }()); 

Fondamentalmente, ho creato una funzione immediata che imposta l’evento su tutti gli elementi e memorizza l’elemento corrente all’interno della chiusura per minimizzare il tuo ingombro.

Ecco una demo funzionante che chiama window.which_element_is_the_mouse_on ogni secondo e registra quale elemento il mouse è attualmente sulla console.

http://jsfiddle.net/LWFpJ/1/