检测从哪个方面鼠标左键一个div

Question

我修改的另一个问题的best answer的代码（其目的是检测从哪个方面鼠标输入一个div），以使其检测从哪个方面的鼠标left a div。

Here is the my code。我改变了日志以显示在控制台中。但不知何故，结果总是“正确”或“底部”，没有“顶”或“左”。

有任何建议吗？

Answer 1

我一直在代码上工作，我修改了一些东西。

既然你是用绝对位置定位你的div，你需要用不同的方式检查位置。

首先，我使用getBoundingClientRect()，它返回元素的位置（左，上，右，下）。

然后我得到鼠标坐标，我计算从哪个边缘最近。

你可以看到这里我的代码示例：

document.querySelector('#content').onmouseleave = function(mouse) { 
 
    var edge = closestEdge(mouse, this); 
 
    console.log(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 "left"; 
 
    case rightEdgeDist: 
 
     return "right"; 
 
    case topEdgeDist: 
 
     return "top"; 
 
    case bottomEdgeDist: 
 
     return "bottom"; 
 
    } 
 
}

#content { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: lightblue; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
}

<div id="content"></div>

我希望帮助你。

干杯！