Вычисление позиции курсора мыши
Данный сниппет поможет вам определить координаты пользовательского курсора практически во всех браузерах.
Функция определения позиций 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"
-
Анимация набора текста на jQuery
Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.
-
Временная шкала на jQuery
jQuery плагин для создания временной шкалы.
-
Заметка: Перезагрузка и редирект на JavaScript
Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.
-
Рисуем диаграмму Ганта
jQuery плагин для создания диаграммы Ганта.
-
AJAX и PHP: загрузка файла
Пример того как осуществить загрузку файла через PHP и jQuery ajax.