Вычисление позиции курсора мыши

Данный сниппет поможет вам определить координаты пользовательского курсора практически во всех браузерах.

Функция определения позиций X-Y

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

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
  }
}

Использование

Теперь мы с лёгкостью можем воспользоваться данной функцией. Для этого нам просто нужно передать объект события. Если же мы хотим определить x-y координаты при клике, то код будет таким:

document.addEventListener( "click", function(e) {
  var x = getPosition(e).x;
  var y = getPosition(e).y;
  console.log("x pos: "+ x +" // y pos:"+ y);
});

Данное решение можно применить не только к клику, но и к другим JavaScript событиям. Надеемся, что данное решение вам пригодится.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://callmenick.com/post/cross-browser-calculation-of-x-y-position
Перевел: Станислав Протасевич
Урок создан: 30 Августа 2016
Просмотров: 26035
Правила перепечатки

5 последних уроков рубрики "jQuery"

^ Наверх ^