it-swarm.com.de

Bestimmen Sie, in welchem ​​Element sich der Mauszeiger befindet

Ich möchte eine Funktion, die mir sagt, über welchem ​​Element sich der Mauszeiger befindet.

Befindet sich der Mauszeiger beispielsweise über diesem Textbereich (mit der ID wmd-input), ist der Aufruf von window.which_element_is_the_mouse_on() funktional äquivalent zu $("#wmd-input").

85
Tom Lehman

DEMO

Es gibt eine wirklich coole Funktion namens document.elementFromPoint, die 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);

document.elementFromPoint

jQuery-Ereignisobjekt

119
qwertymk

In neueren Browsern können Sie Folgendes tun:

document.querySelectorAll( ":hover" );

Dadurch erhalten Sie eine NodeList von Elementen, die sich der Mauszeiger in der Dokumentreihenfolge befindet. Das letzte Element in der NodeList ist das spezifischste Element. Jedes vorherige Element sollte ein übergeordnetes Element, ein Großelternteil usw. sein.

53
dherman

Obwohl das Folgende möglicherweise nicht wirklich die Frage beantwortet, da dies das erste Ergebnis von Googeln ist (der Googler stellt möglicherweise nicht genau die gleiche Frage :), hoffe, er liefert zusätzliche Eingaben.

Es gibt zwei verschiedene Ansätze, um eine Liste aller Elemente zu erhalten, über die sich die Maus gerade befindet (für neuere Browser vielleicht):

Der "strukturelle" Ansatz - aufsteigender DOM-Baum

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, im Allgemeinen jedoch nicht der Fall ist, insbesondere wenn es sich um SVG handelt, bei denen sich Elemente in verschiedenen Zweigen des DOM-Baums überlappen.

Der "visuelle" Ansatz - Basierend auf "visuellen" Überlappungen

Diese Methode verwendet document.elementFromPoint(x, y), um das oberste Element zu finden, es temporär auszublenden (da wir es sofort im selben Kontext wiederherstellen, wird der Browser dies nicht wirklich wiedergeben), und dann das zweite oberste Element finden ... Sie gibt jedoch das zurück, was Sie erwarten, wenn sich z. B. 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.

39
herrlich10

elementFromPoint() erhält nur das erste Element in der DOM-Struktur. Dies ist meist nicht genug für Entwickler. Deshalb gibt es diese Nice-Funktion:

document.elementsFromPoint(x, y) . // mind the 's'

Dies gibt ein Array aller Elementobjekte unter den angegebenen Punkten zurück.

Bei älteren Browsern, die dies nicht unterstützen, können Sie diese Antwort als Fallback verwenden

Weitere Informationen zur älteren Browserkompatibilität finden Sie hier: https://developer.mozilla.org/en-US/docs/Web/API/document/elementsFromPoint

6
Karl Adler

Mouseover-Ereignisblase, damit Sie einen einzelnen Listener auf den Körper legen und darauf warten können, dass sie aufsprudeln, und dann den event.target oder event.srcElement:

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

<body onmouseover="doSomething(getTarget(event));">
5
RobG

Sie können das Ziel des mouseover-Ereignisses auf einem geeigneten Vorfahren anzeigen:

var currentElement = null;

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

Hier ist eine Demo.

4
Ry-

Der folgende Code hilft Ihnen, ein Element des Mauszeigers zu erhalten. Die resultierenden Elemente werden in der Konsole angezeigt.

document.addEventListener('mousemove', function(e) {
    console.log(document.elementFromPoint(e.pageX, e.pageY)); 
})
4
saikumar
<!-- 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. -->
4
Dip M

Das Ziel des DOM-Ereignisses mousemove ist das oberste DOM-Element unter dem Cursor, wenn sich der Mauszeiger 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 nicht jQuery oder ein setInterval.

1
Max Heiber

Sie können diesen Selektor verwenden, um das Objekt zu unterdrücken und es dann als Abfrageobjekt zu bearbeiten. $(':hover').last();

1
Serge Gordeev

Lassen Sie mich zunächst sagen, dass ich die Methode, die ich vorschlagen möchte, nicht empfehlen kann. Es ist viel besser, ereignisgesteuerte Entwicklung zu verwenden und Ereignisse nur an die Elemente zu binden, an denen Sie interessiert sind, ob der Mauszeiger mit mouseover, mouseout, mouseenter, mouseleave usw. beendet ist.

Wenn Sie unbedingt wissen müssen, über welches Element sich der Mauszeiger befindet, müssen Sie eine Funktion schreiben, die das mouseover -Ereignis an alles im DOM bindet, und dann das aktuelle Element in einer Variablen speichern.

Sie könnten so etwas wie folgt:

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 innerhalb der Schließung speichert, um Ihren Footprint zu minimieren.

Hier ist eine funktionierende Demo, die window.which_element_is_the_mouse_on jede Sekunde aufruft und protokolliert, welches Element sich der Mauszeiger gerade auf der Konsole befindet.

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

0
Philip Walton

Alte Frage, aber heres eine Lösung für die, die noch kämpfen können. Sie möchten ein mouseover -Ereignis zu dem 'parent' -Element der untergeordneten Elemente hinzufügen, die erkannt werden sollen. 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)
});

DEMO ON CODEPEN

0
UZOR

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>

0
Zibri