JavaScript: определить HTML элемент по координатам на экране

Быстрый ответ

Для определения элемента, которым владеют указанные координаты, воспользуйтесь методом document.elementFromPoint(x, y). Значения x и y представляют собой координаты точки интереса, и метод возвращает верхний элемент этой точки.

Пример:

let el = document.elementFromPoint(100, 200);
console.log(el); // Мы успешно определили элемент, как стрелок Робин Гуд – цель достигнута!

Убедитесь, что координаты (x, y) не выходят за рамки видимой области, иначе метод вернёт null.

Детальнее разберем: несколько элементов

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

Пример:

let elementsList = document.elementsFromPoint(100, 200);
console.log(elementsList); // Мы нашли все элементы по указанным координатам.

Важное замечание: координаты (x, y) ограничены полями видимости экрана. Если необходимо, можно использовать window.scrollX и window.scrollY для преобразования координат относительно всей страницы.

Выставляем прицел

Используя данные методы в динамичных сценариях, таких как сайты, реагирующие на действия пользователя, учтите возможность изменения позиций и перекрытия элементов. Это может потребовать повторого вызова метода для корректного определения элементов.

elementFromPoint и его применение в реальном времени

В контексте интерфейсов перетаскивания или интерактивных подсказок, elementFromPoint значительно улучшает взаимодействие. Привязывая этот метод к событиям mousemove, вы может быть определите элементы "на лету".

Часть кода:

document.addEventListener('mousemove', (event) => {
  let el = document.elementFromPoint(event.clientX, event.clientY);
  // Дерзайте, обнаруживайте элементы!
});

CSS против JavaScript: стилизация найденных элементов

При стилизации абсолютно позиционированных элементов, запомните о CSS свойстве z-index, которое определяет порядок их перекрытия. Использование elementFromPoint в связке с псевдоклассом :hover и свойством pointer-events может повысить юзабилити сайта.

Визуализация

Представьте веб-страницу как аркадный автомат для захвата игрушек: ваш курсор — это кран, который точно перемещается над целью. Используйте JavaScript как пульт управления:

document.elementFromPoint(x, y); // Перемещайте кран к координатам (x, y), и вы всё сможете!

В итоге, вы "ловите" элемент на данных координатах (x, y).

До: 🧸🎁🎮🖱️🧩
После: 🖱️

Плавание по тёмным водам: обработка непредвиденных условий

Проверка координат

Всегда убеждайтесь, что координаты находятся в пределах видимого экрана, в противном случае результирующим значением будет null. Для этого используйте window.innerWidth и window.innerHeight.

Подробнее об этом расскажет наш спикер на видео

Работа с наложениями

В уже упомянутых случаях перекрытия или вложения элементов, elementsFromPoint предоставляет полный список элементов, позволяя выбрать потребовавшийся вам.

Поддержка браузерами

Имейте в виду, что между браузерами возможны различия, особенно если речь идёт о старых версиях или известных проблемах совместимости. Возможно, придётся применить полифил или поискать альтернативные методы для достижения единообразного поведения.

Полезные материалы

1. Document: elementFromPoint() method – Web APIs | MDN
2. html – Как определить элемент на заданных координатах – JavaScript – Stack Overflow
3. EventTarget: addEventListener() method – Web APIs | MDN
4. z-index | CSS-Tricks – CSS-Tricks
5. MouseEvent – Web APIs | MDN
6. Поиск: getElement, querySelector
7. Рассказ о двух вьюпортах — часть вторая