javascript - 捕获鼠标离开 body 元素越过顶部边界

Question

我想知道当鼠标离开 body 越过顶部边界时，是否有一种方法可以捕获某种鼠标事件或其他事件？

好吧，当用户离开 body 元素并且未设置 cookie 时，我在我的站点上进行了此事件，我只向他们展示了一次此弹出窗口。但此事件会触发 body 的各个方面。

tr = 休假触发事件

我想:

            tr
       +----------+
       |          |
  no-tr|          |no-tr
       |          |
       +----------+
          no-tr

但是我有

             tr
       +----------+
       |          |
     tr|          |tr
       |          |
       +----------+
          tr

我有这样的东西:

$("body").one("mouseleave", initPopup)

我的问题是，是否有一种方法可以仅在用户离开 body 时触发此事件，而不是其他边界？

Answer 1

您可以使用 e.offsetY 并检查它是否小于 0。偏移量是从元素的左上角开始计算的，Y 向下增加。如果 e.offsetY 小于 0，则表示当鼠标移动到附加了事件处理程序的元素上方时触发了事件。

如果页面滚动，您需要考虑 scrollTop 值，因为 offsetY 将具有距元素顶 Angular 的偏移位置，即使它滚动到屏幕顶部之外也是如此。

由于即使鼠标从另一侧移出也会触发事件，因此您不能使用 .one() 而是可以添加一个条件来检查事件是否已被触发来自顶部的“鼠标离开”。

DEMO

triggered = false;
$("body").on("mouseleave", function (e) {
    if (e.offsetY - $(window).scrollTop() < 0 && !triggered) {
        triggered = true;
        alert("leave");
    }
});