Мне нужна функция, которая сообщает мне, какой элемент находится над курсором мыши.
Итак, например, если пользовательская мышь находится над этим текстовым полем (с id 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);
В новых браузерах вы можете сделать следующее:
document.querySelectorAll( ":hover" );
Это даст вам NodeList элементов, которые мышь в настоящее время завершена в порядке документа. Последний элемент в NodeList является наиболее конкретным, каждый из которых должен быть родителем, дедушкой и бабушкой и т.д.
Хотя следующий вопрос может не отвечать на вопрос, так как это первый результат поиска в googling (гуглер может не задавать точно такой же вопрос:), надеюсь, что он предоставит некоторый дополнительный ввод.
На самом деле существует два разных подхода к получению списка всех элементов, которые мышь в данный момент (для более новых браузеров, возможно):
Как и в ответе дермана, можно вызвать
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;
}
Попробуйте оба варианта и проверьте их разные значения.
Мышь пузырьки событий мыши, поэтому вы можете поместить один слушатель в тело и дождаться, когда они начнут пузыриться, затем возьмите 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));">
Вы можете посмотреть на цель события наведения mouseover на некотором подходящем предке:
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. -->
Следующий код поможет вам получить элемент указателя мыши. Результирующие элементы будут отображаться в консоли.
document.addEventListener('mousemove', function(e) {
console.log(document.elementFromPoint(e.pageX, e.pageY));
})
elementFromPoint() получает только первый элемент в дереве DOM. Это в основном не достаточно для нужд разработчиков. Поэтому есть эта хорошая функция:
document.elementsFromPoint(x, y) . // mind the 's'
Это возвращает массив всех элементов элемента под заданными точками.
Для более старых браузеров, которые не поддерживают это, вы можете использовать этот ответ как запасной вариант
Более подробная информация о совместимости старых браузеров здесь: https://developer.mozilla.org/en-US/docs/Web/API/document/elementsFromPoint
Цель события 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, 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 каждую секунду и регистрирует, какой элемент мыши находится на консоли.
Старый вопрос, но здесь есть решение для тех, кто еще может бороться. Вы хотите добавить событие 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)
});