HTML5 Canvas 鼠标滚轮事件

Posted 2023-03-05

技术标签:

【中文标题】HTML5 Canvas 鼠标滚轮事件【英文标题】：HTML5 Canvas Mouse Wheel Event 【发布时间】：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 元素上的标准事件。我做错了吗？

【问题讨论】：

【参考方案1】：

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

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

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

【讨论】：

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

以上是关于HTML5 Canvas 鼠标滚轮事件的主要内容，如果未能解决你的问题，请参考以下文章

Javascript：捕获鼠标滚轮事件并且不滚动页面？