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

Capture mouse leaving body element crossing top border

本文关键字：顶部 边界 元素 body 鼠标 离开      更新时间：2023-09-26

我想知道是否有一种方法来捕获某种鼠标事件或另一个事件，当鼠标离开身体越过顶边界?

我在我的网站上有这个活动，当用户离开body元素而cookie没有设置时，我只向他们展示一次这个弹出框。但是这个事件会在身体的所有侧面触发。

tr = trigger event on leave

我想:

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

但是我有

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

我有这样的东西:

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

我的问题是，如果有一种方法来触发这个事件，只有当用户离开body的顶部边界，但不为其他边界?

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

如果页面是滚动的，你需要考虑scrollTop的值，因为偏移量将从元素的上角偏移位置，即使它从屏幕顶部滚动。

由于事件将被触发，即使鼠标移动到另一边，你不能使用.one()，但你可以添加一个条件来检查事件是否已被触发从"鼠标离开"在顶部。

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

你可以用jquery试试:

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

编辑:在底部边缘编辑no-tr的答案。没有注意到这个问题!

相关文章：