Артём Мáлков

Узнаем, с какой стороны элемента был введен курсор мыши на JavaScript

25 фев0 комм

Сегодня один из читателей сайта задал мне интересную задачку, суть которой следующая. Есть некий элемент, имеющий размер 100x100 PX, можно ли определить, с какой стороны был введен курсор в этот элемент.

Задача необычная, и я даже бы поинтересовался, зачем ему это, но это его личные задумки, а наш же долг – помочь ему в этом.

Итак, что мы изначально имеем? Собственно, только сам элемент и место для вывода результата:

<div id="content"></div>
  
Сторона введения: <span id="result"></span>

<style>
	#content {
		width: 100px;
		height: 100px;
		background: black;
	}
</style>

А теперь напишем небольшую функцию на JavaScript, которая и скажет нам, с какой стороны был введен курсор.

А вот и сама функция:

<script>

	document.querySelector("#content").onmouseenter = function(mouse) {
		var edge = closestEdge(mouse, this);
		document.getElementById('result').innerHTML = edge;
	}

	function closestEdge(mouse, elem) {

		var elemBounding = elem.getBoundingClientRect();
		
		var elementLeftEdge = elemBounding.left;
		var elementTopEdge = elemBounding.top;
		var elementRightEdge = elemBounding.right;
		var elementBottomEdge = elemBounding.bottom;

		var mouseX = mouse.pageX;
		var mouseY = mouse.pageY;

		var topEdgeDist = Math.abs(elementTopEdge - mouseY);
		var bottomEdgeDist = Math.abs(elementBottomEdge - mouseY);
		var leftEdgeDist = Math.abs(elementLeftEdge - mouseX);
		var rightEdgeDist = Math.abs(elementRightEdge - mouseX);

		var min = Math.min(topEdgeDist, bottomEdgeDist, leftEdgeDist, rightEdgeDist);

		switch(min) {
		
			case leftEdgeDist: return "Лево";
			case rightEdgeDist: return "Право";
			case topEdgeDist: return "Верх";
			case bottomEdgeDist: return "Низ";
			
		}
		
	}
	
</script>

Если же вы хотите изменить принцип использования функции и отследить, с какой стороны пользователь вывел курсор мыши, а не ввел, то «onmouseenter» замените на «onmouseleave».

Рекомендуем к просмотру
Реализация методов fadeOut и fadeIn из jQuery на JavaScript
Модули и скрипты
Как запретить изменение размеров textarea на CSS/jQuery?
Статьи и советы
Как изменить стандартный курсор на сайте?
Статьи и советы
0
комментариев
Форма комментирования этого поста скрыта. Авторизуйтесь, чтобы расширить привилегии гостевого посещения и получить необходимую помощь от сообщества Pandoge.
Подняться наверх
«Pandoge» - помощник вебмастера