Координаты курсора с помощью jQuery

Координаты курсора с помощью jQuery. Введение

Координаты курсора с помощью jQueryВ этой статье я покажу маленький но полезный пример, как получать координаты курсора с помощью jQuery. Довольно часто приходится получать координаты курсора, как относительно всей страницы, так и относительно какого-нибудь элемента на странице, например внутри дива. Эти два варианта я и покажу. С первым все просто, можно обрабатывать событие, например, mousemove и получать в нем координаты относительно страницы. Со вторым вариантом — координаты внутри элемента, не на много сложнее: получаем координаты элемента и координаты курсора, находим разницу, а ответ и будет положение курсора внутри элемента.

Координаты курсора с помощью jQuery. Пример

Для наглядности приведу рабочий пример:




Наведи сюда!

Координаты курсора с помощью jQuery. Код

А теперь сам код, получение координат относительно всей страницы:

$(document).mousemove(function(e){
    var X = e.pageX; // положения по оси X
    var Y = e.pageY; // положения по оси Y
    console.log("X: " + X + " Y: " + Y); // вывод результата в консоль
});		

Получение координат относительно элемента

$(document).ready(function(){
  $('.div_hover').mousemove(function(e){
	// положение элемента
	var pos = $(this).offset();
	var elem_left = pos.left;
	var elem_top = pos.top;
	// положение курсора внутри элемента
	var Xinner = e.pageX - elem_left;
	var Yinner = e.pageY - elem_top;
	console.log("X: " + Xinner + " Y: " + Yinner); // вывод результата в консоль
  });
});

На этом все.

Рассказать друзьям:


Координаты курсора с помощью jQuery: 4 комментария

  1. Я хочу вызвать модальное окно в месте клика мышкой
    //Определяю координаты мышки
    $(document).mousemove(function(e){
    var MX = e.pageX; // положения по оси X
    var MY = e.pageY; // положения по оси Y
    )}
    //вывожу окно
    $.window ({
    url:’test.php’,
    x: MX,
    y:MY,
    width:600,
    height:400
    });
    Не работает, переменные MX и MY не передаются.

  2. Артур
    Переменные MX и MY доступны только в функции $(document).mousemove.
    Что бы определить переменные как глобальные их нужно прописать в теле script:
    var MX = 0;
    var MY = 0;
    $(document).mousemove(function(e){
    MX = e.pageX;
    MY = e.pageY;
    )}
    $.window ({
    url:’test.php’,
    x: MX,
    y:MY,
    width:600,
    height:400
    });

  3. Как в конструкцию $(document).mousemove(function(e){ … вписать именованную функцию? Т.е. как правильно закрепить обработчик события за именованной внешней функцией?
    Точнее сказать, вписать-то функцию у меня получается, но почему-то не получается передать в нее обьект event — когда функция срабатывает, то обьект event не передается….

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*