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

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

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

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

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

Ответы [ 13 ]

0 голосов
/ 25 февраля 2019

DEMO: D Наведите указатель мыши в окне фрагмента: D 

<script>
document.addEventListener('mouseover', function (e) {
	  console.log ("You are in ",e.target.tagName);
});
</script>
0 голосов
/ 20 октября 2018

Старый вопрос, но здесь есть решение для тех, кто еще может бороться. Вы хотите добавить событие mouseover в элемент 'parent' дочернего элемента (элементов), который вы хотите обнаружить. Приведенный ниже код показывает вам, как это сделать. 

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

DEMO ON CODEPEN

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

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

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

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