从哪一侧检测鼠标离开 div 元素

Question

我修改了另一个问题的最佳答案代码(旨在检测鼠标从哪一侧进入一个div)，以便它能够检测鼠标从哪一侧离开一个div。 这是我的代码，我将日志更改为在控制台中显示。但不知何故结果始终是“右侧”或“底部”，而没有“顶部”或“左侧”。

请问有什么建议吗？

- Ian Y.

---

你的代码似乎运行良好... - Sagar

之前的代码片段对你是否有效？ - Sagar

我认为问题在于它不支持position: absolute。你尝试过不加这个属性吗？ - JV Lobo

@IanY，值得注意的是为什么JavaScript和jQuery没有给出相同的答案。 - Sagar

@IanY。我也测试了绝对定位效果，结果发现同样的错误出现了。 - Sagar

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>

希望这对你有所帮助。

祝好！

- JV Lobo

---

非常感谢！这个可行。另一个答案 中的另一个问题也注意到了绝对定位的问题。 - Ian Y.