javascript - 即使在 Chrome 上没有移动鼠标，也会在滚动时触发 mousemove 事件

Question

我试图回答自定义下拉列表的问题，但遇到了 Chrome 和 Firefox 中不一致行为的挑战。

演示: http://jsfiddle.net/fyeht/ [为更清晰添加滚动事件]

见下图，可以使用箭头键导航列表项。

重现问题:

1. 在 Chrome 中打开控制台 (F12)
2. 单击列表中的一个项目(您会注意到控制台中记录了一些事件)
3. 使用向下箭头键导航到列表中的下一项
4. 最后，当您到达 View 中的最后一项并且按下向下箭头会滚动时，就会注意到该问题。检查日志以查看“滚动”、“鼠标输入”和“鼠标移动”[检查新演示]

问题是在到达 View 中的项目末尾后，它会滚动。即使鼠标未被触动，它也会触发 Chrome 中的 mouseenter 和 mousemove 事件。在 FF 中，滚动时它只触发有意义的 mouseenter。

问题:

• 为什么 mousemove 在鼠标未被触及时触发？
• 这只是浏览器不一致吗？找不到有关滚动时触发的事件的文档？ (从来不知道它做到了)

提交错误报告:https://code.google.com/p/chromium/issues/detail?id=241476

Answer 1

在您的示例中，我看到每当鼠标悬停在 <ul> 上时，Chrome 和 FF 都会触发 mouseenter DOM 事件然后按下键触发浏览器滚动以显示所选的 <li>进入视野。

但是，只有 Chrome 会额外触发 mousemove 事件。两者抛出的 mouseenter 事件对象中的一个明显区别是，对于 Chrome，MouseEvent.offsetX和 MouseEvent.offsetY包括值，而在 FF 中这些属性是 undefined .因此，当输入被触发时，Chrome 已经确定鼠标“已经移动”。

自 MouseEvent.screenX和 MouseEvent.screenY事件上下文值不会在滚动触发之间更改 MouseEvent在实例中，人们或许可以通过存储先前事件的这些值来区分“人工”mouseenter/mousemove 事件和“真实”事件。

DOM 事件规范

DOM Level 2 Event Specification for mousemove阅读:

The mousemove event occurs when the pointing device is moved while it is over an element.

Level 3 spec (working draft)本质上是一样的:

A user agent must dispatch this event when a pointing device is moved while it is over an element.

似乎可以归结为是否相对地解释“被移动”。

另外，在 section of the Level 3 spec on mouse event order ，它表示当指针移入元素时，它会按顺序触发 mouseover、mouseenter 和 mousemove。那里指定的每个案例总是同时包含这三个，所以也许有人可能会认为如果你要触发 mouseenter 事件，你也应该触发 mousemove对应于进入元素的事件。