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

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

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

84 голоса | спросил Tom Lehman 11 Jam1000000amWed, 11 Jan 2012 05:32:38 +040012 2012, 05:32:38

11 ответов


0

DEMO

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

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

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

document.elementFromPoint

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

ответил qwertymk 11 Jam1000000amWed, 11 Jan 2012 05:42:46 +040012 2012, 05:42:46
0

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

document.querySelectorAll( ":hover" );

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

ответил dherman 7 MaramThu, 07 Mar 2013 08:36:37 +04002013-03-07T08:36:37+04:0008 2013, 08:36:37
0

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

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

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

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

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

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

ответил herrlich10 11 Jam1000000amSun, 11 Jan 2015 09:40:36 +030015 2015, 09:40:36
0

Пузырьки событий при наведении курсора, так что вы можете поместить одного слушателя на тело и подождать, пока он всплывет, затем захватить 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));">
ответил RobG 11 Jam1000000amWed, 11 Jan 2012 06:37:27 +040012 2012, 06:37:27
0

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

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

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

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

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

ответил Karl Adler 4 PM000000120000001631 2015, 12:45:16
0
<!-- 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. -->
ответил Dip M 28 AM00000070000004531 2013, 07:42:45
0

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

document.addEventListener('mousemove', function(e) {
    console.log(document.elementFromPoint(e.pageX, e.pageY)); 
})
ответил saikumar 19 PM00000060000000031 2015, 18:48:00
0

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

var currentElement = null;

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

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

ответил Ry- 11 Jam1000000amWed, 11 Jan 2012 05:36:43 +040012 2012, 05:36:43
0

Целью события DOM mousemove является самый верхний элемент 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.

ответил Max Heiber 15 Jpm1000000pmThu, 15 Jan 2015 17:32:34 +030015 2015, 17:32:34
0

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

ответил Serge Gordeev 5 PM00000070000001931 2016, 19:47:19
0

Позвольте мне начать с того, что я не рекомендую использовать метод, который я собираюсь предложить. Гораздо лучше использовать управляемую событиями разработку и привязывать события только к элементам, которые вас интересуют, чтобы узнать, не закончена ли мышь с помощью mouseover, mouseout, mouseenter, mouseleave и т. Д.

Если вы абсолютно ДОЛЖНЫ знать, над каким элементом мыши находится курсор, вам нужно написать функцию, которая связывает mouseover

Вы могли бы так что-то вроде этого:

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 каждую секунду и регистрирует, какой элемент мыши находится в данный момент на консоли.

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

ответил Philip Walton 11 Jam1000000amWed, 11 Jan 2012 05:50:15 +040012 2012, 05:50:15

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132