Получение координат X и Y при клике мыши в JavaScript

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

Чтобы получить координаты X и Y места клика мыши, вы можете применить следующий код на JavaScript:

document.onclick = (e) => console.log(`Координаты клика: X = ${e.clientX}, Y = ${e.clientY}`);

При помощи этого простого скрипта вы сможете определить позиции X и Y каждого клика по странице.

Разбираемся с объектом MouseEvent

Определение координат курсора после клика осуществляется с помощью объекта MouseEvent и его свойств: clientX, clientY, pageX, pageY.

• clientX и clientY позволяют узнать координаты относительно видимой области страницы. Эти значения не изменяются при прокрутке.
• pageX и pageY показывают координаты относительно всей страницы. Если вместо них возвратиться значение undefined, значит, эти свойства не поддерживаются конкретным браузером. В таких случаях лучше использовать clientX и clientY.

function printMousePos(e) {
    console.log(`Координаты на странице: X = ${e.pageX}, Y = ${e.pageY}`);
    console.log(`Координаты относительно видимой области: X = ${e.clientX}, Y = ${e.clientY}`);
}
document.addEventListener('click', printMousePos);

Совмещаем простоту с совместимостью

С точки зрения совместимости с разными браузерами рекомендуется использовать clientX и clientY. Если необходимо определить координаты относительно внутри элемента, по которому был совершён клик, удобно применять event.offsetX и event.offsetY.

function getCoordsRelativeToElement(event) {
    console.log(`Координаты относительно элемента: X = ${event.offsetX}, Y = ${event.offsetY}`);
}
document.addEventListener('click', getCoordsRelativeToElement);

При создании интерактивных интерфейсов, когда нужно отслеживание координат мыши в онлайн режиме, можно применить такое решение:

document.onmousemove = (e) => {
    document.getElementById("liveCoords").textContent = `X = ${e.clientX}, Y = ${e.clientY}`;
};

Обработка событий в усложнённой ситуации

В случае необходимости реализации механизма отслеживания координат в сложных приложениях, например, в играх, важно:

• Обеспечить глобальный доступ к вашей функции
• Проверять работу кода в разнообразных браузерах
• Гарантировать отсутствие конфликтов с другими скриптами, могущими повлиять на обработку событий

При использовании pageX и pageY учтите влияние прокрутки страницы, так как она меняет получаемые значения.

Настройка вашей реализации

Если ваши определения координат мыши не соответствуют ожидаемым, рекомендуется проверить следующее:

• Проверьте корректность работы ваших game.js или другой файла обработчика
• Устраните конфликты со другими скриптами
• Консоль браузера подскажет, где может быть проблема

Показываем координаты клика пользователю

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

document.addEventListener('click', function(event) {
    let coordDisplay = document.getElementById("coordDisplay");
    coordDisplay.textContent = `X = ${event.clientX}, Y = ${event.clientY}`;
});

Здесь мы применяем элемент с идентификатором coordDisplay, для отображения координат после каждого клика.

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

На примере ниже показано, как можно отобразить места кликов на странице, сравнив их с маркерами на карте:

document.addEventListener('click', function(event) {
    const flagX = event.pageX;
    const flagY = event.pageY;
});

Каждый клик устанавливает своего рода "маркер" на вашей веб-странице, по аналогии с системой размещения маркеров на карте.

Учитываем CSS и responsive дизайн

При работе с координатами клика важно учитывать особенности CSS и адаптивного дизайна. При позиционировании элементов интерфейса на основе координат клика обязательно учитывать размеры экрана, разрешение, а также отступы и padding, чтобы получить максимально точное определение координат клика.

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

1. Свойство clientX объекта MouseEvent – Web API | MDN
2. Отслеживание позиции мыши в JavaScript – Stack Overflow
3. Введение в работу с событиями браузера
4. Свойства событий в JavaScript
5. .offset() | Документация по jQuery API
6. Позиционирование мыши с помощью JavaScript (Пример на CodePen)