Voglio una funzione che mi dica su quale elemento si trova il cursore del mouse.
Quindi, ad esempio, se il mouse dell'utente si trova su questa textarea (con id wmd-input), la chiamata window.which_element_is_the_mouse_on()sarà funzionalmente equivalente a$("#wmd-input")
Risposte:
C'è una funzione davvero interessante chiamata document.elementFromPointche fa quello che sembra.
Ciò di cui abbiamo bisogno è trovare le coordinate xey del mouse e quindi chiamarlo usando quei valori:
var x = event.clientX, y = event.clientY,
elementMouseIsOver = document.elementFromPoint(x, y);
event.targeto altro
event.target?
eventsia e come sia stato
Nei browser più recenti, puoi eseguire le seguenti operazioni:
document.querySelectorAll( ":hover" );Questo ti darà un NodeList di elementi su cui si trova attualmente il mouse nell'ordine del documento. L'ultimo elemento in NodeList è il più specifico, ciascuno precedente dovrebbe essere un genitore, un nonno e così via.
<li>po 'di tempo sopra altri <li>elementi.
$(':hover')ma è fondamentalmente la stessa cosa: jsfiddle.net/pmrotule/2pks4tf6
(function(){ var q = document.querySelectorAll(":hover"); return q[q.length-1]; })()
mousemovepotrebbe danneggiare la performance
Sebbene quanto segue potrebbe non rispondere effettivamente alla domanda, poiché questo è il primo risultato del googling (il googler potrebbe non porre esattamente la stessa domanda :), spero che fornisca qualche input extra.
In realtà esistono due diversi approcci per ottenere un elenco di tutti gli elementi su cui si trova attualmente il mouse (forse per i browser più recenti):
Come nella risposta di Dherman, si può chiamare
var elements = document.querySelectorAll(':hover');Tuttavia, questo presuppone che solo i bambini si sovrapporranno ai loro antenati, il che di solito è il caso, ma non è vero in generale, specialmente quando si ha a che fare con SVG dove elementi in diversi rami dell'albero DOM possono sovrapporsi l'un l'altro.
Questo metodo utilizza document.elementFromPoint(x, y)per trovare l'elemento più in alto, nasconderlo temporaneamente (poiché lo recuperiamo immediatamente nello stesso contesto, il browser non lo renderà effettivamente), quindi prosegui per trovare il secondo elemento più in alto ... Sembra un po 'hacky, ma restituisce ciò che ci si aspetta quando, ad esempio, elementi fratelli in un albero 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 rendimenti.
Document.elementsFromPoint(x, y) stackoverflow.com/a/31805883/1059828
elementFromPoint()ottiene solo il primo elemento nell'albero DOM. Questo per lo più NON è sufficiente per le esigenze degli sviluppatori. Per ottenere più di un elemento, ad esempio, la posizione corrente del puntatore del mouse questa è la funzione che ti serve:
document.elementsFromPoint(x, y) . // mind the 's' in elementsRestituisce un array di tutti gli oggetti elemento sotto il punto specificato. Basta passare i valori X e Y del mouse a questa funzione.
Maggiori informazioni qui: https://developer.mozilla.org/en-US/docs/Web/API/document/elementsFromPoint
Per browser molto vecchi che non sono supportati, puoi utilizzare questa risposta come riserva.
Bolla degli eventi al passaggio del mouse, quindi puoi mettere un singolo ascoltatore sul corpo e attendere che si gonfino, quindi prendi il event.targeto event.srcElement:
function getTarget(event) {
var el = event.target || event.srcElement;
return el.nodeType == 1? el : el.parentNode;
}
<body onmouseover="doSomething(getTarget(event));">
document.elementFromPoint(x, y).
Il codice seguente ti aiuterà a ottenere l'elemento del puntatore del mouse. Gli elementi risultanti verranno visualizzati nella console.
document.addEventListener('mousemove', function(e) {
console.log(document.elementFromPoint(e.pageX, e.pageY));
})
e.clientXe e.clientYinvece (testato su Firefox 59).
Puoi guardare l'obiettivo mouseoverdell'evento su un antenato adatto:
var currentElement = null;
document.addEventListener('mouseover', function (e) {
currentElement = e.target;
});
<!-- One simple solution to your problem could be like this: -->
<div>
<input type="text" id="fname" onmousemove="javascript: alert(this.id);" />
<!-- OR -->
<input type="text" id="fname" onclick="javascript: alert(this.id);" />
</div>
<!-- Both mousemove over the field & click on the field displays "fname"-->
<!-- Works fantastic in IE, FireFox, Chrome, Opera. -->
<!-- I didn't test it for Safari. -->
DEMO: D Muovi il mouse nella finestra dello snippet: D
<script>
document.addEventListener('mouseover', function (e) {
console.log ("You are in ",e.target.tagName);
});
</script>L'obiettivo mousemovedell'evento DOM è 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;
}
});
})();
È simile alla soluzione di @Philip Walton, ma non richiede jQuery o setInterval.
Puoi usare questo selettore per undermouse oggetto e poi manipolarlo come oggetto jquery. $(':hover').last();
Vorrei iniziare dicendo che non consiglio di utilizzare il metodo che sto per suggerire. E 'molto meglio utilizzare event-driven di sviluppo e si legano gli eventi solo per gli elementi che ti interessa sapere se il mouse si trova sopra con mouseover, mouseout, mouseenter, mouseleave, etc.
Se DEVI assolutamente avere la capacità di sapere su quale elemento si trova il mouse, dovresti scrivere una funzione che associ l' mouseoverevento a tutto nel DOM e quindi memorizzare qualunque sia l'elemento corrente in una variabile.
Potresti quindi 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 ridurre al minimo il tuo footprint.
Ecco una demo funzionante che chiama window.which_element_is_the_mouse_onogni secondo e registra sulla console l'elemento su cui si trova attualmente il mouse.
Vecchia domanda ma ecco una soluzione per coloro che potrebbero ancora essere in difficoltà. Desideri aggiungere un mouseoverevento all'elemento "genitore" degli elementi secondari che desideri rilevare. Il codice seguente mostra come procedere.
const wrapper = document.getElementById('wrapper') //parent element
const position = document.getElementById("displaySelection")
wrapper.addEventListener('mousemove', function(e) {
let elementPointed = document.elementFromPoint(e.clientX, e.clientY)
console.log(elementPointed)
});