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