jQuery：单个 mouseenter/mouseleave 处理程序答案

【问题标题】：jQuery: single mouseenter/mouseleave handlerjQuery：单个 mouseenter/mouseleave 处理程序
【发布时间】：2013-03-14 12:11:40
【问题描述】：

我需要跟踪页面上所有元素的 mouseenter / mouseleave 事件。

直观的编写代码是：

$(window).on('mouseenter mouseleave', function(e) {
  console.log(e.target, e.type);
  // ...
});

但是每次 mouseenter 发生在子元素上时它都会触发 mouseleave 事件，从而抵消了 mouseenter/mouseleave 的所有好处，即它像 mouseover/mouseout 一样工作。

有没有办法在不将处理程序直接附加到所有元素的情况下处理这个问题？

这看起来像一个 jQuery 错误吗？因为从我所知道的和我读过的 jQuery 文档看来，上面的代码应该可以正常工作。

编辑：按预期工作：http://jsbin.com/axuluc/9/

【问题讨论】：

您的意思是您需要跟踪所有元素吗？例如，每个<div>、<img> 等？
它工作得很好，但是当鼠标进入一个新元素时，它会像你期望的那样离开另一个元素！
您想跟踪所有元素的 mouseenter/leave，但它会为每个子元素触发...这不是您想要的吗？你能描述一下你想要达到的目标吗？无论如何，在 Chrome 中，jsbin 似乎对我来说可以正常工作。
当我从一个元素移动到它的子元素时，我不想触发“mouseleave”。这就是“mouseenter/mouseleave”事件的全部内容。
那么只需删除mouseleave 部分？

【解决方案1】：

all 定义中包含子元素，不是吗？

如果可能的话，给想要的元素一个类，比如class="mouse_active" 或使用适当的选择器。

那么……

$(window).on('mouseenter mouseleave','.mouse_active', function(e) {
  console.log(e.target, e.type);
  // ...
});

你仍然附加一个处理程序

【讨论】：

【解决方案2】：

这是正确的做法：

$(window).hover(
   function(){
      // mouse enter function...
   },
   function(){
      // mouse leave function...
   }
);

【讨论】：