时间戳

首页 > 解决方案 > 文档的 mouseleave 事件，考虑到 Chrome 错误

javascript - 文档的 mouseleave 事件，考虑到 Chrome 错误

问题描述

我需要安全地检测鼠标何时离开窗口。我有 jQuery，所以通常这会很好：

$(document).on("mouseleave", function(event) {
  doSomething();
});

但是，Chrome 目前存在一个重大错误mouseleave，即单击元素时此功能会随机触发。

通常，有一个简单的解决方法：

$("#some-id").on("mouseleave", function(event) {
  var e        = event.originalEvent;
  if (!e.relatedTarget || !e.toElement) {
    // BUG in Chrome
    return;
  }
  doSomething();
}

但是，这不适用于document或当鼠标离开窗口时的任何元素，因为在这种情况下，e.relatedTarget并且与错误发生时完全一样e.toElement为 null 。因此，我正在尝试提出一些能够安全地确定 Chrome 何时启动以及 mouseleave 事件何时应该触发的方法。

更新：只是尝试了一种方法mouseout。同样的 chrome bug 也会影响这个事件，所以不好。：/

更新：这显然已修复，Chrome 问题被标记为“已修复”，我的测试表明当前版本的 Chrome 不再存在问题。:D

标签： javascriptjquerygoogle-chrome

解决方案

目前，这是我想出的解决方案。希望有一天 Chrome 中的这个主要错误得到足够的关注以得到修复。

在mouseleave作为错误发生的事件中，通常几乎是立即发生的mouseenter事件。所以我在这里所做的只是在 mouseleave 事件之后等待 1/10 秒，以确保它不是 Chrome 侥幸。

var documentMouseLeaveTimeout = null;
$(document).on("mouseleave", function() {
  documentMouseLeaveTimeout = setTimeout(function() {
    doSomething();
  }, 100);
});

$(document).on("mouseenter", function() {
  clearTimeout(documentMouseLeaveTimeout);
});

还是希望有更好的答案。

更新：这显然已修复，Chrome 问题被标记为“已修复”，我的测试表明当前版本的 Chrome 不再存在问题。:D

推荐阅读