Мне нужна функция, которая сообщала бы мне, над каким элементом находится курсор мыши.
Так, например, если указатель мыши находится над этим текстовым полем (с идентификатором wmd-input), вызов window.which_element_is_the_mouse_on()будет функционально эквивалентен $("#wmd-input").
Ответы:
Есть действительно классная функция, document.elementFromPointкоторая делает то, на что похоже.
Что нам нужно, так это найти координаты x и y мыши, а затем вызвать ее, используя эти значения:
var x = event.clientX, y = event.clientY,
elementMouseIsOver = document.elementFromPoint(x, y);event.targetили что-то еще
event.target?
eventтакое и как оно появилось
В более новых браузерах вы могли делать следующее:
document.querySelectorAll( ":hover" );Это даст вам список NodeList элементов, над которыми в данный момент находится указатель мыши, в порядке документа. Последний элемент в NodeList является наиболее конкретным, каждый предшествующий элемент должен быть родителем, дедушкой и дедушкой и так далее.
<li>время перетаскивал поверх других <li>элементов.
$(':hover')но в основном это то же самое: jsfiddle.net/pmrotule/2pks4tf6
(function(){ var q = document.querySelectorAll(":hover"); return q[q.length-1]; })()
mousemoveможет повредить производительность
Хотя нижеследующее может фактически не отвечать на вопрос, поскольку это первый результат поиска в Google (гуглер может не задавать точно такой же вопрос :), надеюсь, он предоставит дополнительные данные.
На самом деле существует два разных подхода к получению списка всех элементов, над которыми в данный момент находится мышь (возможно, для новых браузеров):
Как и в ответе Дхермана , можно позвонить
var elements = document.querySelectorAll(':hover');Однако это предполагает, что только дочерние элементы будут перекрывать своих предков, что обычно имеет место, но в целом неверно, особенно при работе с SVG, где элементы в разных ветвях дерева DOM могут перекрывать друг друга.
Этот метод используется, document.elementFromPoint(x, y)чтобы найти самый верхний элемент, временно скрыть его (поскольку мы восстанавливаем его немедленно в том же контексте, браузер фактически не будет его отображать), а затем перейдите к поиску второго самого верхнего элемента ... Выглядит немного хакерским, но он возвращает то, что вы ожидаете, когда есть, например, элементы-братья и сестры в дереве, перекрывающие друг друга. Пожалуйста, найдите этот пост для более подробной информации,
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;
}Попробуйте оба варианта и проверьте их разные варианты возврата.
Document.elementsFromPoint(x, y) stackoverflow.com/a/31805883/1059828
elementFromPoint()получает только первый элемент в дереве DOM. Чаще всего этого недостаточно для нужд разработчиков. Чтобы получить более одного элемента, например, в текущей позиции курсора мыши, вам нужна следующая функция:
document.elementsFromPoint(x, y) . // Mind the 's' in elementsЭто возвращает массив всех объектов элементов в данной точке. Просто передайте этой функции значения X и Y мыши.
Дополнительная информация здесь: DocumentOrShadowRoot.elementsFromPoint ()
Для очень старых браузеров, которые не поддерживаются, вы можете использовать этот ответ как запасной вариант.
События при наведении указателя мыши всплывают, поэтому вы можете поместить одного слушателя в тело и дождаться, пока они всплывут, а затем нажмите event.targetили 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).
Следующий код поможет вам получить элемент указателя мыши. Полученные элементы отобразятся в консоли.
document.addEventListener('mousemove', function(e) {
console.log(document.elementFromPoint(e.pageX, e.pageY));
})e.clientXи e.clientYвместо (проверено в 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. -->Наведите указатель мыши на окно фрагмента: D
<script>
document.addEventListener('mouseover', function (e) {
console.log ("You are in ", e.target.tagName);
});
</script>Целью mousemoveсобытия DOM является самый верхний элемент DOM под курсором при перемещении мыши:
(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;
}
});
})();Это похоже на решение @Philip Walton, но не требует jQuery или setInterval.
Вы можете использовать этот селектор, чтобы скрыть объект, а затем управлять им как объектом jQuery:
$(':hover').last();Вот решение для тех, кто все еще борется. Вы хотите добавить mouseoverсобытие в «родительский» элемент дочернего элемента (ов), который вы хотите обнаружить. В приведенном ниже коде показано, как это сделать.
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)
});Позвольте мне начать с того, что я не рекомендую использовать метод, который собираюсь предложить. Это гораздо лучше использовать событие с приводом развития и привязки событий только к элементам , которые вы заинтересованы в знании или не мышь находится над с mouseover, mouseout, mouseenter,mouseleave и т.д.
Если вам абсолютно необходимо знать, над каким элементом находится мышь, вам нужно написать функцию, связывающуюmouseover событие ко всему в DOM, а затем сохраняет то, что текущий элемент находится в некоторой переменной.
Можно было вот так:
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);
}
}());По сути, я создал немедленную функцию, которая устанавливает событие для всех элементов и сохраняет текущий элемент внутри замыкания, чтобы минимизировать ваш след.
Вот рабочая демонстрация, которая вызывает window.which_element_is_the_mouse_onкаждую секунду и записывает, какой элемент в данный момент находится на консоли.