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

Question

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

看看这个 fiddle :http://jsfiddle.net/F3EwW/

重现步骤:

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

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

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

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

我查了一下w3spec event scroll和 mouse event order , 但找不到任何关于此的信息。

还有 mouseenter 的规范描述如下，

A user agent must dispatch this event when a pointing device is moved onto the boundaries of an element or one of its descendent elements. This event type is similar to mouseover, but differs in that it does not bubble, and must not be dispatched when the pointer device moves from an element onto the boundaries of one of its descendent elements.

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

Answer 1

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

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

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

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