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

Сегодня один из читателей сайта задал мне интересную задачку, суть которой следующая. Есть некий элемент, имеющий размер 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».