捕获鼠标离开身体元素越过顶部边界答案

【问题标题】：Capture mouse leaving body element crossing top border捕获鼠标离开身体元素越过顶部边界
【发布时间】：2014-07-09 16:23:22
【问题描述】：

我想知道当鼠标离开身体越过顶部边界时，是否有办法捕获某种鼠标事件或其他事件？

好吧，当用户离开 body 元素并且未设置 cookie 时，我在我的网站上有此广告系列，我只向他们显示此弹出窗口一次。但是这个事件会触发身体的各个方面。

tr = 休假触发事件

我喜欢：

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

但我有

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

我有这样的事情：

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

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

【问题讨论】：

How to differ mouseout/leave events by side on jquery? 的可能重复项
看起来很奇怪你正在尝试做什么，如果用户使用快捷方式关闭选项卡/浏览器怎么办（鼠标不离开身体）......如果你不应该更好在用户离开页面之前设置cookie？ window.onbeforeunload = function(){return "are you sure?"}

标签： javascript jquery html

【解决方案1】：

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

如果页面被滚动，您需要考虑 scrollTop 值，因为 offsetY 将具有距元素顶角的偏移位置，即使它从屏幕顶部滚动。

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

DEMO

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

【讨论】：

好吧，这很好，但是那个偏移很糟糕，如果我的页面向下滚动到某个地方，当我离开我的身体时，感觉就像是在给出随机数。当我离开身体的顶部时，并不总是第一次起作用。这是不可接受的解决方案，因为我必须放置一个事件，所以如果它第一次不起作用，那么它就会挂起！
我已经尝试过这个....问题仍然在于偏移量本身。我尝试重新加载页面并像在页面中间滚动并让页面越过顶部边框，我将随机值从-50 到 100 进行门控，有时它第一次就正确，有时就像第 10 次一样。在这里喂食：jsfiddle.net/b2GEq/8
@user2945241 您可以从 offsetY 值中取出 scrollTop 值。更新了我的答案，这是一个小提琴jsfiddle.net/b2GEq/9
那位先生！是正确的答案...请写下答案，以便我回答！
@user2945241 我已经更新了我的答案并包含了一个关于 scrollTop 值的部分

【解决方案2】：

你可以用 jquery 试试这个：

$('#element').mouseout(function(e) {
if (e.offsetY < 0) {
 //   your event
}
});

编辑：在底部边缘编辑了 no-tr 的答案。没注意到有问题！

【讨论】：

即使鼠标移出元素并穿过底部边缘也会触发
我已将答案编辑为仅在越过顶部边界时触发。