Получение позиции мыши в JS без событий и движений

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

Для того чтобы узнать текущее положение курсора мыши, вы можете зафиксировать его при одном из событий мыши, а затем получить элемент по этим координатам с помощью метода document.elementFromPoint. Пример кода выглядит следующим образом:

// Обращаемся к мыши, фиксируя её минимальное перемещение, например, при событии 'mousemove'
document.addEventListener('mousemove', function (event) {
  window.lastMouseX = event.clientX;
  window.lastMouseY = event.clientY;
}, {once: true});

// Теперь можно определить последнее положение курсора
let mouseX = window.lastMouseX;
let mouseY = window.lastMouseY;
let elementAtMouse = document.elementFromPoint(mouseX, mouseY);

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

Ограничения и альтернативные решения

Обычно JavaScript отслеживает положение курсора мыши с помощью обработчиков событий. Существуют и другие методы, но в большинстве случаев они более сложны и не стабильны:

• Создание невидимого слоя: Прозрачный div с линками <a> внутри поможет определить начальное положение курсора, используя события наведения.
• События CSS hover: Можно применить псевдоклассы :hover совместно с getComputedStyle() для отслеживания состояний наведения при первичной загрузке страницы.
• Рекурсивное деление экрана: Применение бинарного поиска позволяет примерно определить место, где находится курсор.

Недостатки альтернативных решений

Важно учитывать баланс между точностью и производительностью. Хотя использование слоя с начальным положением может создавать впечатление эффективности, сложные и ресурсоемкие решения не всегда могут быть оправданными.

Применение обработчиков событий и интервалов

Вот примеры реализации альтернативных способов:

1. Бинарный поиск: Создаются элементы <a>, покрывающие поле просмотра для обнаружения примерного положения курсора.
2. Добавление обработчиков событий: Подписка на события mouseenter и mouseleave для отслеживания движения над элементами.
3. Регулярные проверки: Определение положения курсора с использованием getComputedStyle() на регулярных интервалах.
4. Уточнение положения: Улучшение метода путем дальнейшего сокращения сегментов области просмотра движения курсора.

Непрактичность предложенных решений

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

Отслеживание перемещения мыши и веб-технологии

JavaScript и веб-технологии работают на принципах событийно-ориентированной парадигмы. Использование CSS и добавление интерактивных элементов является менее приоритетным подходом.

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

Получение позиции курсора без его перемещения можно представить как попытку найти ниндзя-программиста в абсолютной тишине:

🖥️ Экран: [📦, 📦, 📦, 📍, 📦]

📍 = Последние известные координаты ниндзя (курсора)

1. Запускаем операцию, отслеживающую положение ниндзя: `let ninjaPosition = {x: null, y: null};`
2. Однократно зафиксируем координаты ниндзя: `document.onmousemove = (e) => { ninjaPosition.x = e.x; ninjaPosition.y = e.y; }`
3. Таким образом, позиция ниндзя известна, даже если он находится в состоянии полного спокойствия!

В иных выражениях:

🐱‍💻 = Положение курсора (`ninjaPosition`)
🖱️ = Событие перемещения мыши (`document.onmousemove`)
🕵️‍♂️ = Вы, анализирующий первоначальное положение курсора

Отсутствие движений? Не проблема. Последнее положение будет известно, так же как мерцание тени от брошенного камня в безмолвном пруду 💧.

Другие нестандартные подходы

Существуют иные методы, каждый из которых имеет свои особенности и ограничения.

Запрашивание последнего элемента, получившего фокус

Вы можете регулярно проверять, какой элемент страницы получил последний фокус:

let focusedElement;
document.onfocus = (e) => {
  focusedElement = e.target; // Как Шерлок, преследующий Мориарти!
};

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

Проверка активного элемента

Можно определять активный элемент документа на регулярной основе, что особенно актуально для форм:

setInterval(() => {
  let activeEl = document.activeElement; // Какой элемент в данный момент привлекает наше внимание?
}, 1000);

Внешние устройства

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

Разбор реализуемости альтернативных решений

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

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

1. MouseEvent – Web API | MDN — Подробная дискуссия свойств событий мыши.
2. Введение в события браузера — Информация о том, как обработать события на JavaScript.
3. Javascript – События мыши — Рассматриваются особенности совместимости и методы управления событиями мыши в различных браузерах.
4. Получение позиции клика мыши в JavaScript | kirupa.com — Пример, помогающий разобраться в координатах клика мыши.
5. Учебник по координатам мыши на HTML5 Canvas — Инструкция по работе с координатами мыши при использовании HTML5 Canvas.
6. Node.js: Цикл событий, таймеры и process.nextTick() — Описание цикла событий Node.js для отслеживания мыши на стороне сервера.