檢測從哪個方面鼠標左鍵一個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>

我希望幫助你。

乾杯！