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

Question

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

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

重现步骤：

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

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

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

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

我查找了w3spec 事件滚动和鼠标事件顺序，但找不到任何关于此的内容。

mouseenter的规范描述如下，

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

在 Chrome 中，您也会注意到mouseover被触发。我已经发布了一个问题和一个错误报告。

Answer 1

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

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

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

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