检测鼠标从哪一侧离开 div

Posted 2023-02-16

【中文标题】检测鼠标从哪一侧离开 div

【英文标题】：Detect from which side the mouse left a div

【发布时间】：2017-12-06 06:37:44

【问题描述】：

我修改了另一个问题的best answer 的代码（旨在检测鼠标从哪一侧进入 div）以使其检测鼠标从哪一侧离开div。

Here is the my code。我将日志更改为在控制台中显示。但不知何故，结果总是“右”或“下”，没有“上”或“左”。

有什么建议吗？

【问题讨论】：

您的代码似乎运行良好...

@Sagar 对不起。我错误地链接了最佳答案的 jsFiddle。我已更正链接以使其链接到我的 jsFiddle。

上一个小提琴的模组对你有用吗？

我认为问题在于它不适用于位置：绝对。你试过没有那个吗？

@IanY。我也测试了绝对定位效果以获得最佳答案，并且似乎正在发生相同的错误。

【参考方案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>

希望对你有帮助。

干杯！

【讨论】：

非常感谢！这行得通。另一个问题的Another answer 也注意到了绝对定位的问题。