HTML5 Canvas 鼠标滚轮事件答案

【问题标题】：HTML5 Canvas Mouse Wheel EventHTML5 Canvas 鼠标滚轮事件
【发布时间】：2011-07-21 13:43:56
【问题描述】：

我似乎无法在 Firefox 的 HTML5 画布中获取 onMouseWheel 事件。以下 sn-p 在 Chrome 和 IE9 中按预期工作，但在 Firefox 中我只收到点击事件：

<!DOCTYPE html>
<html>
<body>
<canvas id="TestCanvas" tabindex="2" onmousewheel="window.alert('wheel!')" onclick="window.alert('click!')" style="width:90%;height:90%;margin-left:auto;margin-right:auto border:1px solid green;"></canvas>
</body>
</html>

根据我看到的规范，onMouseWheel 应该是 HTML5 元素上的标准事件。我做错了吗？

【问题讨论】：

标签： firefox html canvas

【解决方案1】：

Firefox does not support mousewheel 事件。（我刚刚在 Firefox 4 中进行了测试，似乎它仍然不支持它。）

您可以改用DOMMouseScroll 事件，但不能通过 DOM 属性附加。您必须改用 addEventListener。

这里是 a jsFiddle example 使用 jQuery 来做的。

【讨论】：

感谢 Nathan，它适用于 FF 4。这是仅限 Firefox 的事件吗？