Ich möchte eine Funktion, die mir sagt, über welchem Element sich der Mauszeiger befindet.
Befindet sich beispielsweise die Maus des Benutzers über diesem Textbereich (mit ID wmd-input), entspricht der Aufruf window.which_element_is_the_mouse_on()funktional dem$("#wmd-input")
Antworten:
Es gibt eine wirklich coole Funktion, document.elementFromPointdie macht, wie es sich anhört.
Was wir brauchen, ist, die x- und y-Koordinaten der Maus zu finden und sie dann mit diesen Werten aufzurufen:
var x = event.clientX, y = event.clientY,
elementMouseIsOver = document.elementFromPoint(x, y);event.targetoder was auch immer
event.target?
eventist und wie es dazu kam
In neueren Browsern können Sie Folgendes tun:
document.querySelectorAll( ":hover" );Dadurch erhalten Sie eine NodeList mit Elementen, über die sich die Maus derzeit in der Dokumentreihenfolge befindet. Das letzte Element in der NodeList ist das spezifischste. Jedes vorhergehende Element sollte ein Elternteil, ein Großelternteil usw. sein.
<li>Weile über andere <li>Elemente zog.
$(':hover')aber es ist im Grunde das gleiche: jsfiddle.net/pmrotule/2pks4tf6
(function(){ var q = document.querySelectorAll(":hover"); return q[q.length-1]; })()
mousemove
Obwohl das Folgende die Frage möglicherweise nicht wirklich beantwortet, da dies das erste Ergebnis des Googelns ist (der Googler stellt möglicherweise nicht genau die gleiche Frage :), hoffe ich, dass es zusätzliche Informationen liefert.
Es gibt zwei verschiedene Ansätze, um eine Liste aller Elemente zu erhalten, über die sich die Maus gerade befindet (für neuere Browser möglicherweise):
Wie in Dhermans Antwort kann man anrufen
var elements = document.querySelectorAll(':hover');Dies setzt jedoch voraus, dass nur Kinder ihre Vorfahren überlagern, was normalerweise der Fall ist, aber im Allgemeinen nicht zutrifft, insbesondere wenn es sich um SVG handelt, bei dem sich Elemente in verschiedenen Zweigen des DOM-Baums möglicherweise überlappen.
Diese Methode verwendet document.elementFromPoint(x, y), um das oberste Element zu finden, es vorübergehend auszublenden (da wir es sofort im selben Kontext wiederherstellen, wird es vom Browser nicht wirklich gerendert) und dann das zweitoberste Element zu finden ... Sieht ein wenig hackig aus, aber Es gibt zurück, was Sie erwarten, wenn sich beispielsweise Geschwisterelemente in einem Baum befinden, die sich gegenseitig verschließen. Bitte finden Sie diesen Beitrag für weitere Details,
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;
}Probieren Sie beide aus und überprüfen Sie die unterschiedlichen Renditen.
Document.elementsFromPoint(x, y) stackoverflow.com/a/31805883/1059828
elementFromPoint()Ruft nur das erste Element im DOM-Baum ab. Dies ist meistens NICHT genug für Entwickleranforderungen. Um mehr als ein Element an der aktuellen Mauszeigerposition zu erhalten, benötigen Sie folgende Funktion:
document.elementsFromPoint(x, y) . // mind the 's' in elementsDies gibt ein Array aller Elementobjekte unter dem angegebenen Punkt zurück. Übergeben Sie einfach die X- und Y-Werte der Maus an diese Funktion.
Weitere Informationen finden Sie hier: https://developer.mozilla.org/en-US/docs/Web/API/document/elementsFromPoint
Bei sehr alten Browsern, die nicht unterstützt werden, können Sie diese Antwort als Fallback verwenden.
Mouseover-Ereignisse sprudeln, sodass Sie einen einzelnen Hörer auf den Körper setzen und warten können, bis sie aufblähen, und dann das event.targetoder greifen 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).
Der folgende Code hilft Ihnen dabei, das Element des Mauszeigers abzurufen. Die resultierenden Elemente werden in der Konsole angezeigt.
document.addEventListener('mousemove', function(e) {
console.log(document.elementFromPoint(e.pageX, e.pageY));
})e.clientXund e.clientY(getestet in Firefox 59).
Sie können das Ziel des mouseoverEreignisses anhand eines geeigneten Vorfahren anzeigen:
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 Bewegen Sie Ihre Maus im Snippet-Fenster: D.
<script>
document.addEventListener('mouseover', function (e) {
console.log ("You are in ",e.target.tagName);
});
</script>Das Ziel des mousemoveDOM-Ereignisses ist das oberste DOM-Element unter dem Cursor, wenn sich die Maus bewegt:
(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;
}
});
})();Dies ähnelt der Lösung von @Philip Walton, erfordert jedoch weder jQuery noch ein setInterval.
Mit diesem Selektor können Sie ein Objekt unterbieten und es dann als Abfrageobjekt bearbeiten. $(':hover').last();
Lassen Sie mich zunächst sagen, dass ich die von mir vorgeschlagene Methode nicht empfehle. Es ist viel besser zu Einsatz ereignisgesteuerter Entwicklung und binden Ereignisse nur auf die Elemente , die Sie interessiert sind zu wissen , ob die Maus mit ist vorbei mouseover, mouseout, mouseenter,mouseleave etc.
Wenn Sie unbedingt wissen müssen, über welchem Element sich die Maus befindet, müssen Sie eine Funktion schreiben, die das mouseoverEreignis an alles im DOM bindet , und dann das aktuelle Element in einer Variablen speichern.
Sie könnten so etwas wie das:
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);
}
}());Grundsätzlich habe ich eine Sofortfunktion erstellt, die das Ereignis für alle Elemente festlegt und das aktuelle Element im Abschluss speichert, um Ihren Platzbedarf zu minimieren.
Hier ist eine funktionierende Demo, die window.which_element_is_the_mouse_onjede Sekunde aufruft und protokolliert, über welches Element sich die Maus gerade in der Konsole befindet.
Alte Frage, aber hier ist eine Lösung für diejenigen, die möglicherweise noch Probleme haben. Sie möchten mouseoverdem übergeordneten Element der untergeordneten Elemente, die erkannt werden sollen , ein Ereignis hinzufügen . Der folgende Code zeigt Ihnen, wie Sie vorgehen müssen.
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)
});