Визначення позиції курсора за допомогою JavaScript

Цей фрагмент коду дає повністю кросбраузерне рішення для обчислення положення курсора користувача — координат x та y відносно вебсторінки.

Функція визначення координат

Визначити X та Y координати мишки відносно документа може здатися складним завданням: кожен браузер має власні властивості для обчислення положення курсора. Наведена функція повністю кросбраузерна й працює на чистому JavaScript. 

function getPosition(e) {
  var posx = 0;
  var posy = 0;
  if (!e) var e = window.event;
  if (e.pageX || e.pageY) {
    posx = e.pageX;
    posy = e.pageY;
  }
  else if (e.clientX || e.clientY) {
    posx = e.clientX + document.body.scrollLeft
      
      + document.documentElement.scrollLeft;
    posy = e.clientY + document.body.scrollTop
      
      + document.documentElement.scrollTop;
  }
  return {
    x: posx,
    y: posy
  
  }
}

Використання

Користуватися функцією просто. Наприклад, щоб отримати координати кліку, достатньо передати в обробник події нашу функцію getPosition. На практиці це виглядає приблизно так:

document.addEventListener( "click", function(e) {
  var x = getPosition(e).x; // Получаем координаты X
  var y = getPosition(e).y; // Получаем координаты Y
  console.log("x pos: "+ x +" // y pos:"+ y); // Выведем результат в консоль
});

Це рішення можна застосовувати й до інших подій JavaScript. Сподіваємося, що сніпет був корисним. Якщо потрібна складніша інтерактивність на сайті — напишіть нам, підкажемо, як це краще реалізувати.