Получить координаты курсора

Ниже приведенная функция getPosition() получает текущие координаты курсора. Используя ее в разных jQuery событиях можно получить координаты клика или координаты курсора когда он находится над определенным элементом.

function getPosition(e){
	var x = y = 0;

	if (!e) {
		var e = window.event;
	}

	if (e.pageX || e.pageY){
		x = e.pageX;
		y = e.pageY;
	} else if (e.clientX || e.clientY){
		x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
		y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
	}

	return {x: x, y: y}
}
JS

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

/* Координаты курсора */
$('body').mousemove(function(e){
	var coord = getPosition(e);
	$('#coord-live').html(coord.x + "," + coord.y);
});

/* Координаты клика */
$('body').click(function(e){
	var coord = getPosition(e);
	$('#coord-click').html(coord.x + "," + coord.y);
});
JS

Метод getBoundingClientRect() возвращает объект DOMRect, который содержит размеры элемента и его положение относительно видимой области просмотра.

Если из координат курсора мыши (e.clientX и e.clientY) вычесть положение элемента, то можно получить внутреннее положение курсора и клика.

<p>
	<strong>Координаты курсора:</strong> <span id="coord-live"></span><br>
	<strong>Координаты клика:</strong> <span id="coord-click"></span>
</p>

<div class="element"></div>
HTML
$('.element').mousemove(function(e){
	var target = this.getBoundingClientRect();
	var x = e.clientX - target.left;
	var y = e.clientY - target.top;
	$('#coord-live').html(x + ', ' + y);
});

$('.element').click(function(e){
	var target = this.getBoundingClientRect();
	var x = e.clientX - target.left;
	var y = e.clientY - target.top;
	$('#coord-click').html(x + ', ' + y);
});
JS

Также можно определить в какой части элемента находится курсор:

<p><strong>Положение:</strong> <span id="coord-live"></span></p>
<div class="element"></div>
HTML

По вертикали

$('.element').mouseleave(function(e){
	$('#coord-live').html('за пределами элемента');
});

$('.element').mousemove(function(e){
	var share = $(this).height() / 3;
	var target = this.getBoundingClientRect();
	var y = e.clientY - target.top;
	
	if (y >= 0 && y <= share) {
		$('#coord-live').html('в верхней части');
	} else if (y > share && y <= $(this).height() - share) {
		$('#coord-live').html('в центре');
	} else {
		$('#coord-live').html('в нижней части');
	}
});
JS

По горизонтали

$('.element').mouseleave(function(e){
	$('#coord-live').html('за пределами элемента');
});

$('.element').mousemove(function(e){
	var share = $(this).width() / 3;
	var target = this.getBoundingClientRect();
	var x = e.clientX - target.left;
	
	if (x >= 0 && x <= share) {
		$('#coord-live').html('в левой части');
	} else if (x > share && x <= $(this).width() - share) {
		$('#coord-live').html('в центре');
	} else {
		$('#coord-live').html('в правой части');
	}
});
JS
01.02.2017, обновлено 15.02.2020
25846

Комментарии 1

Ruslan_Javakov Ruslan_Javakov
5 июня 2022 в 10:28
+1
Спасибо за контент, крутая штука как раз что нужно, для работы

, чтобы добавить комментарий.

Другие публикации

Кнопки прокрутки страницы вверх и вниз jQuery
Несколько примеров как сделать кнопки прокрутки страницы вверх и вниз. Для скроллинга используется jQuery функция...
24416
+3
Select option с ссылками
По спецификации HTML в option нельзя вставить ссылку, если все-таки её туда вставить, то работать она не будет. В таких случаях можно сделать перенаправление браузера по клику на JS или имитацию...
16896
+7
Работа с Textarea jQuery
Сборник jQuery приемов с textarea - получить содержимое, вставить значение, подсчет количества символов и строк и т.д.
44521
+4
Как сделать интерактивную схему на SVG + jQuery
В данном примере описано как сделать интерактивную схему магазинов на основе векторной графики SVG и jQuery.
37052
+18
Главное меню для мобильной версии сайта
Не очень сложное раскрывающееся меню для мобильной версии сайта на JQuery.
34840
+10
Стилизация кнопок CSS
Стилизация ссылок и кнопок на примере разных сайтов с поддержкой разными состояний – наведение курсора, нажатие, попадание в фокус и заблокированное состояние элемента.
30195
0