Определите, какой элемент указатель мыши находится сверху в Javascript - PullRequest
Новая
       36

Определите, какой элемент указатель мыши находится сверху в Javascript

91 голосов
/ 11 января 2012

Мне нужна функция, которая сообщает мне, над каким элементом находится курсор мыши.

Так, например, если мышь пользователя находится над этой текстовой областью (с идентификатором wmd-input), вызов window.which_element_is_the_mouse_on() будет функционально эквивалентен $("#wmd-input")

Ответы [ 13 ]

125 голосов
/ 11 января 2012

DEMO

Есть действительно классная функция под названием document.elementFromPoint, которая делает то, что звучит как.

Нам нужно найти координаты x и yмыши, а затем вызвать его, используя эти значения: 

var x = event.clientX, y = event.clientY,
    elementMouseIsOver = document.elementFromPoint(x, y);

document.elementFromPoint

jQuery объект события

56 голосов
/ 07 марта 2013

В более новых браузерах вы можете делать следующее: 

document.querySelectorAll( ":hover" );

Это даст вам NodeList элементов, над которыми в данный момент находится мышь в порядке документов.Последний элемент в NodeList является наиболее конкретным, каждый предшествующий элемент должен быть родителем, дедушкой и т. Д.

43 голосов
/ 11 января 2015

Хотя на самом деле следующее не может ответить на вопрос, так как это первый результат поиска в Google (гуглер может не задавать точно такой же вопрос :), надеюсь, он даст дополнительный ввод.

Естьфактически два разных подхода к получению списка всех элементов, над которыми в данный момент находится мышь (возможно, для более новых браузеров):

«Структурный» подход - восходящее дерево DOM

Как и в ответе Дермана,можно назвать 

var elements = document.querySelectorAll(':hover');

Однако это предполагает, что только их дети будут перекрывать своих предков, что обычно имеет место, но в целом это не так, особенно при работе с SVG, где элемент находится в разных ветвях дерева DOM.могут перекрывать друг друга.

«Визуальный» подход - основан на «визуальном» перекрытии

Этот метод использует document.elementFromPoint(x, y), чтобы найти самый верхний элемент, временно скрыть его (так как мы немедленно восстанавливаем егов том же контексте браузер фактически не будет отображать это), а затем перейдите к поиску второго по величинеelement ... Выглядит немного странно, но возвращает то, что вы ожидаете, когда, например, элементы дерева и сестры в дереве перекрывают друг друга.Пожалуйста, найдите этот пост для более подробной информации, 

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;
}

Попробуйте оба варианта и проверьте их различный доход.

8 голосов
/ 04 августа 2015

elementFromPoint() получает только первый элемент в дереве DOM. В основном этого недостаточно для нужд разработчиков. Поэтому есть эта хорошая функция: 

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

Возвращает массив всех элементов элемента под заданными точками.

Для более старых браузеров, которые не поддерживают это, вы можете использовать этот ответ как запасной вариант

Подробнее о совместимости с более старыми браузерами здесь: https://developer.mozilla.org/en-US/docs/Web/API/document/elementsFromPoint

6 голосов
/ 11 января 2012

Пузырьки событий при наведении мыши, так что вы можете поместить одного слушателя на тело и подождать, пока они всплывают, затем захватить 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));">
4 голосов
/ 19 августа 2015

Следующий код поможет вам получить элемент указателя мыши.Полученные элементы отобразятся в консоли. 

document.addEventListener('mousemove', function(e) {
    console.log(document.elementFromPoint(e.pageX, e.pageY)); 
})
4 голосов
/ 28 августа 2013 
<!-- 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 голосов
/ 11 января 2012

Вы можете посмотреть на цель события mouseover у какого-нибудь подходящего предка: 

var currentElement = null;

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

Вот демонстрация.

1 голос
/ 05 августа 2016

Вы можете использовать этот селектор, чтобы подмыть объект и затем манипулировать им как объектом jquery.$(':hover').last();

1 голос
/ 15 января 2015

Целью события 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.

Страница:
...