VueUse中useMouse在滚动事件中的坐标计算问题解析

问题背景

在VueUse工具库中，useMouse组合式API用于跟踪鼠标位置，但在特定场景下会出现坐标计算不准确的问题。当页面发生滚动而鼠标本身没有移动时，返回的鼠标位置坐标会出现错误值。

问题本质

问题的根源在于坐标提取逻辑与滚动事件处理的配合不当。useMouse默认使用"page"类型的坐标提取器(event.pageX和event.pageY)，这种坐标值已经包含了窗口滚动偏移量。然而在滚动事件处理函数中，又额外加上了当前的滚动位置，导致重复计算。

具体表现为：

最终坐标 = 鼠标到视口左上角的距离(不含滚动) + 旧滚动偏移量 + 当前滚动偏移量

技术分析

正确的处理方式应该是：

1. 在普通鼠标移动事件中，使用event.pageX/pageY获取完整坐标
2. 在滚动事件中，应该使用event.clientX/clientY获取视口相对坐标，然后加上当前滚动位置

这种差异处理是因为：

• clientX/clientY：相对于浏览器视口的坐标，不包含滚动偏移
• pageX/pageY：相对于整个文档的坐标，已包含滚动偏移

解决方案

该问题已在VueUse的更新中得到修复。修复方案主要调整了滚动事件中的坐标提取逻辑，确保不会重复计算滚动偏移量。

开发者建议

对于需要精确鼠标位置跟踪的场景，开发者应该：

1. 确保使用最新版本的VueUse库
2. 明确自己需要的坐标类型：
   • 视口相对坐标：适合与可见区域交互
   • 文档相对坐标：适合与整个页面内容交互
3. 在涉及滚动的复杂交互中，建议单独测试鼠标位置跟踪功能

总结

鼠标位置计算看似简单，但在实际网页环境中需要考虑多种因素。VueUse库通过持续优化，为开发者提供了更可靠的鼠标跟踪解决方案。理解底层原理有助于开发者在遇到类似问题时快速定位和解决。