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

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

Функция определения позиций 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
Просмотров: 7984
Правила перепечатки


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

  • Отключение прокрутки на Google картах

    Скорее всего каждый из нас хоть один раз вставлял Google карты на свои страницы. Тогда вы не могли не столкнуться с проблемой: во время прокрутки страницы, если курсор попадал на карту Google, то вместо смещения страницы, начинала масштабироваться карта. Мы ответим на вопрос о том, как отключить прокрутку в Google картах.

  • 16 jQuery плагинов для создания “каруселей”

    Данные jQuery плагины позволят быстро и безболезненно создать слайдер контента.

  • Извлечение GET параметров через JavaScript

    Параметры в URL могут содержать кучу полезной информации: данные о товаре, пользовательские настройки, идентификатор партнёра. В этой статье посмотрим как через JS можно извлечь данную информацию.

  • Удаление элементов через JavaScript

    Существует несколько методов удаления элементов через JavaScript: традиционный, перебирая элементы и новый - прямой метод DOM4.

  • 15 JS библиотек для валидации форм

    Подборка из 15 JS библиотек с помощью которых вы сможете быстро организовать надёжную валидацию данных для ваших форм.

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 27 Сентября 2016 21:54
    renata1897
    А какое применение к этой функции? Приведите кто-нибудь примеры
    • 10 Октября 2016 23:44
      coderphp_info
      иногда делают при клике на фильтр вывод в данном месте блок с подтверждениям загрузки товаров
^ Наверх ^