Відповіді:
Є по-справжньому класна функція, 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>елементами.
(function(){ var q = document.querySelectorAll(":hover"); return q[q.length-1]; })()
mousemoveможе зашкодити виставі
Хоча наступне може насправді не відповісти на питання, оскільки це перший результат googling (googler може не задавати точно таке саме питання :), сподіваємось, це дасть додатковий вклад.
Насправді існує два різних підходи, щоб отримати список усіх елементів, над якими миша наразі закінчена (можливо, для нових браузерів):
Як і у відповіді дхермана, можна зателефонувати
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.
Більше інформації тут: https://developer.mozilla.org/en-US/docs/Web/API/document/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).
Ви можете подивитися ціль 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. -->DEMO: D Перемістіть мишу у вікні фрагмента: 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, 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)
});