56、JavaScript 鼠标滚轮与拖放事件全解析

JavaScript 鼠标滚轮与拖放事件全解析

1. 鼠标滚轮事件概述

现代浏览器均支持鼠标滚轮，并在用户转动滚轮时触发相应事件。通常，浏览器会利用鼠标滚轮来滚动文档或缩放页面，但我们可以通过取消鼠标滚轮事件来阻止这些默认操作。不过，鼠标滚轮事件存在一些兼容性问题，但仍可编写跨平台的代码。

目前，除 Firefox 外，所有浏览器都支持名为 “mousewheel” 的事件，Firefox 则使用 “DOMMouseScroll”，而 DOM Level 3 Events 草案提议使用 “wheel” 事件替代 “mousewheel”。不同事件对象使用不同属性名来表示滚轮的旋转量。此外，鼠标滚轮在硬件上也存在差异，有些仅支持前后一维旋转，有些（特别是 Mac 上的鼠标）还支持左右旋转，甚至 DOM Level 3 标准还支持三维鼠标 “滚轮”。

2. 事件对象属性

不同浏览器和事件类型下，事件对象的属性有所不同：
| 浏览器/事件类型 | 属性 | 说明 |
| ---- | ---- | ---- |
| “mousewheel” 事件 | wheelDelta | 表示用户转动滚轮的距离，远离用户一个 “点击” 通常为 120，靠近用户为 -120 |
| Safari 和 Chrome | wheelDeltaX 和 wheelDeltaY | 支持二维轨迹球鼠标，wheelDelta 和 wheelDeltaY 值始终相同 |
| Firefox（DOMMouseScroll 事件） | detail | 需乘以 -40 来计算等效的 wheelDelta 值 |
| DOM Level