Chcę funkcji, która mówi mi, nad którym elementem znajduje się kursor myszy.
Na przykład, jeśli mysz użytkownika znajduje się nad tym obszarem tekstowym (z identyfikatorem wmd-input), wywołanie window.which_element_is_the_mouse_on()będzie funkcjonalnie równoważne z $("#wmd-input").
Odpowiedzi:
Jest naprawdę fajna funkcja o nazwie, document.elementFromPointktóra robi to, na co wygląda.
Potrzebujemy znaleźć współrzędne x i y myszy, a następnie wywołać je przy użyciu tych wartości:
var x = event.clientX, y = event.clientY,
elementMouseIsOver = document.elementFromPoint(x, y);event.targetczy cokolwiek innego
event.target?
eventjest i jak do tego doszło
W nowszych przeglądarkach możesz wykonać następujące czynności:
document.querySelectorAll( ":hover" );To da ci NodeList elementów, nad którymi aktualnie znajduje się mysz w kolejności dokumentów. Ostatni element w NodeList jest najbardziej szczegółowy, każdy poprzedzający powinien być rodzicem, dziadkiem i tak dalej.
<li>chwilę na inne <li>elementy.
$(':hover')ale to w zasadzie to samo: jsfiddle.net/pmrotule/2pks4tf6
(function(){ var q = document.querySelectorAll(":hover"); return q[q.length-1]; })()
mousemovemoże zaszkodzić wydajności
Chociaż poniższe informacje mogą w rzeczywistości nie odpowiadać na pytanie, ponieważ jest to pierwszy wynik wyszukiwania w Google (pracownik Google może nie zadać dokładnie tego samego pytania :), mam nadzieję, że dostarczy dodatkowych informacji.
W rzeczywistości istnieją dwa różne podejścia do uzyskania listy wszystkich elementów, nad którymi aktualnie znajduje się mysz (być może w przypadku nowszych przeglądarek):
Jak w odpowiedzi Dhermana , można zadzwonić
var elements = document.querySelectorAll(':hover');Jednak zakłada się, że tylko dzieci będą nakładać na swoich przodków, co zwykle ma miejsce, ale nie jest to prawdą w ogóle, szczególnie w przypadku SVG, w którym elementy w różnych gałęziach drzewa DOM mogą się nakładać.
Ta metoda wykorzystuje document.elementFromPoint(x, y)do znalezienia najwyższego elementu, tymczasowego ukrycia go (ponieważ odzyskujemy go natychmiast w tym samym kontekście, przeglądarka w rzeczywistości tego nie wyrenderuje), a następnie przejdź do znajdowania drugiego najwyższego elementu ... Wygląda trochę dziwnie, ale zwraca to, czego się spodziewasz, gdy np. w drzewie występują elementy rodzeństwa, które się blokują. Proszę znaleźć ten post, aby uzyskać więcej informacji,
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;
}Wypróbuj oba i sprawdź ich różne zwroty.
Document.elementsFromPoint(x, y) stackoverflow.com/a/31805883/1059828
elementFromPoint()pobiera tylko pierwszy element w drzewie DOM. To przeważnie nie wystarcza dla potrzeb programistów. Aby uzyskać więcej niż jeden element na przykład w bieżącej pozycji wskaźnika myszy, jest to funkcja, której potrzebujesz:
document.elementsFromPoint(x, y) . // Mind the 's' in elementsZwraca tablicę wszystkich obiektów elementów w danym punkcie. Po prostu podaj wartości X i Y myszy do tej funkcji.
Więcej informacji znajduje się tutaj: DocumentOrShadowRoot.elementsFromPoint ()
W przypadku bardzo starych przeglądarek, które nie są obsługiwane, możesz użyć tej odpowiedzi jako rozwiązania zastępczego.
Zdarzenia po najechaniu kursorem myszy pojawiają się w dymkach, więc możesz umieścić jednego słuchacza na ciele i poczekać, aż się rozwiną, a następnie złapać event.targetlub 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).
Poniższy kod pomoże Ci uzyskać element wskaźnika myszy. Wynikowe elementy zostaną wyświetlone w konsoli.
document.addEventListener('mousemove', function(e) {
console.log(document.elementFromPoint(e.pageX, e.pageY));
})e.clientXi e.clientYzamiast tego (testowane w przeglądarce Firefox 59).
<!-- 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. -->Przesuń kursor myszy w oknie fragmentu kodu: D
<script>
document.addEventListener('mouseover', function (e) {
console.log ("You are in ", e.target.tagName);
});
</script>Celem mousemovezdarzenia DOM jest znajdujący się najwyżej element DOM pod kursorem, gdy porusza się mysz:
(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;
}
});
})();Jest to podobne do rozwiązania @Philip Walton, ale nie wymaga jQuery ani setInterval.
Możesz użyć tego selektora, aby podkopać obiekt, a następnie manipulować nim jako obiektem jQuery:
$(':hover').last();Oto rozwiązanie dla tych, którzy nadal mogą mieć problemy. Chcesz dodać mouseoverzdarzenie do elementu „nadrzędnego” elementu podrzędnego, który chcesz wykryć. Poniższy kod pokazuje, jak się do tego zabrać.
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)
});Zacznę od stwierdzenia, że nie polecam stosowania metody, którą mam zamiar zasugerować. Jest o wiele lepiej zdarzeniami rozwoju i wiązania zdarzeń używać tylko do elementów jesteś zainteresowany wiedząc, czy mysz jest nad z mouseover, mouseout, mouseenter,mouseleave , itd.
Jeśli absolutnie musisz mieć możliwość wiedzieć, który element znajduje się nad myszą, musiałbyś napisać funkcję, która wiąże mouseoverzdarzenie ze wszystkim w DOM, a następnie przechowywać cokolwiek, co znajduje się w bieżącym elemencie w jakiejś zmiennej.
Mógłbyś coś takiego:
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);
}
}());Zasadniczo stworzyłem natychmiastową funkcję, która ustawia zdarzenie na wszystkich elementach i przechowuje bieżący element w zamknięciu, aby zminimalizować twój ślad.
Oto działające demo, które wywołuje window.which_element_is_the_mouse_on co sekundę i rejestruje na konsoli element, na którym aktualnie znajduje się mysz.