HTML5 Canvas Mouse Wheel Event

By | January 12, 2018

I can’t seem to get onMouseWheel events in an HTML5 canvas in Firefox. The following snippet works as expected in Chrome and IE9, but in Firefox I only receive the click event:

<!DOCTYPE html>
<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>

According to the specifications I’ve seen, onMouseWheel should be a standard event on HTML5 elements. Am I doing something wrong?


Firefox does not support the mousewheel event. (I just tested in Firefox 4 and seems like it still doesn’t support it.)

You can use the DOMMouseScroll event instead, though you can’t attach through the DOM attribute. You have to use addEventListener instead.

Here is a jsFiddle example using jQuery to do it.

Leave a Reply

Your email address will not be published. Required fields are marked *