为什么滚动下方页面时会触发 mouseenter 事件？

Question

我注意到mouseenter 事件在鼠标未被触摸但光标下方的页面滚动时触发。

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

重现步骤：

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

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

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

有谁知道这种行为是否记录在规范或任何真实网页的任何地方？

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

另外mouseenter的规格说明如下，

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

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

Answer 1

你意识到你有$('li').mouseenter(function () { 吗？ 这导致 mouseenter 事件绑定到每个 li 元素，因此当您使用向上和向下键滚动并且鼠标仍在 ul 内时，它会不断输入新的 l​​i。这不是意外的功能鼠标进入新元素。

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

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

您还需要意识到 DOM 理解鼠标相对于文档的移动，而不是像您的操作系统那样理解鼠标在屏幕上的位置。