简介
在使用 Chrome 浏览器时，如果我们绑定了 mousemove 事件处理程序，并且在滚动页面时并没有移动鼠标，我们也会发现 mousemove 事件被触发了。这种行为有些奇怪，因为它违反了我们通常对 mousemove 事件的理解：只有当鼠标移动时才会触发该事件。
分析
首先，我们需要明确一个事实：Chrome 在滚动页面时确实会触发 mousemove 事件。那么问题来了，为什么会这样呢？这个行为是否符合规范？
答案是肯定的。根据 W3C 标准，滚动页面时应该同时触发 scroll 和 mousemove 事件，即使鼠标没有移动。这种行为是由于 mousemove 事件的产生机制决定的。
当我们点击鼠标按键并开始移动鼠标时，浏览器会生成一系列 mousemove 事件，直到松开鼠标按键为止。在这个过程中，无论鼠标是否真正地移动，都会产生一些 mousemove 事件。这种行为可以通过下面这段代码来验证：
-------------------------------------- ----- -- - ------------------- -- ------- -------------------------------------- ----- -- - ------------------------- -- ------- ------------------------------------ ----- -- - ----------------------- -- -------
在上面的示例中，我们添加了 mousedown 和 mouseup 事件处理程序，以便在鼠标按下和松开时输出一些信息。同时，我们还添加了一个 mousemove 事件处理程序，以便在每次产生 mousemove 事件时输出该事件的相关信息。
然后，我们运行上面的代码并尝试进行以下操作：
- 点击鼠标并移动它，观察控制台输出；
- 点击鼠标但不移动它，观察控制台输出；
- 不点击鼠标但滚动页面，观察控制台输出。
通过这个实验，我们可以看到以下现象：
- 当我们点击鼠标并移动它时，会连续输出多个
mousemove事件，并且它们的clientX、clientY属性会不断变化，这表明鼠标确实移动了； - 当我们点击鼠标但不移动它时，也会不断输出
mousemove事件，但是它们的clientX、clientY属性始终不变，这表明鼠标没有真正地移动； - 当我们不点击鼠标但滚动页面时，也会不断输出
mousemove事件，但是它们的clientX、clientY属性始终不变，这表明鼠标并没有移动。
根据上述实验结果，我们可以得出结论：滚动页面时触发的 mousemove 事件和点击鼠标但不移动它时触发的 mousemove 事件是相同的，都是由于产生机制决定的。
解决方案
既然 Chrome 在滚动页面时会触发 mousemove 事件，那么该怎么办呢？如果你只是简单地监听了 mousemove 事件，并根据鼠标位置进行一些计算或操作，那么可能会误导你。因此，我们需要一些解决方案来避免这种情况的影响。
- 监
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/31438