为什么在滚动下面的页面时触发了mouseenter事件？

Question

我注意到当鼠标未触及但是滚动光标下方的页面时触发了mouseenter事件。

看看这个小提琴：http://jsfiddle.net/F3EwW/

重现的步骤：

1. 点击li
2. 使用上/下箭头键滚动项目
3. 当下面的mouseenter滚动到视图时，您会注意到li事件被触发。

注意：要注意此行为，请确保鼠标光标位于li上方并保持不变。

最初，我接受了这个作为默认行为，并继续在我的代码中解决这个问题。但后来我很好奇，并想在任何文档中验证这种行为，我无法在任何地方找到它。

是否有人知道此行为是否记录在规范或任何真实网页的任何位置？

我查了w3spec event scroll和mouse event order，但找不到任何相关信息。

mouseenter的规范说明如下，

  

当指点设备移动到元素或其后代元素之一的边界上时，用户代理必须调度此事件。此事件类型与鼠标悬停类似，但不同之处在于它不会冒泡，并且当指针设备从元素移动到其后代元素之一的边界时，不得调度该事件类型。

在Chrome中，您会注意到mouseover也会被触发。我已经在此发布了question和bug report。

Answer 1

你意识到你有$('li').mouseenter(function () {？ 这导致mouseenter事件绑定到每个li元素，所以当你使用向上和向下键滚动并且你的鼠标仍然在ul里面时它会继续输入一个新的li。此不是鼠标在输入新元素时的非预期功能。

您正在寻找的行为更像是这样：

$("element").bind("mousemove mouseenter", function(event) {
    //...
});

此外，您需要了解DOM了解鼠标相对于文档的移动，而不是操作系统中鼠标在屏幕上的位置。