Menu
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>
<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>
According to the specifications I've seen, onMouseWheel should be a standard event on HTML5 elements. Am I doing something wrong?
494
The onwheel event occurs when the mouse wheel is rolled up or down over an element. The onwheel event also occurs when the user scrolls or zooms in or out of an element by using a touchpad (like the "mouse" of a laptop).
The wheelDelta attribute value is an abstract value which indicates how far the wheel turned. If the wheel has rotated away from the user, it's positive, otherwise negative.
The wheel event fires when the user rotates a wheel button on a pointing device (typically a mouse). This event replaces the non-standard deprecated mousewheel event.
To listen for mouse wheel events in React, we can set the onWheel prop to the mouse wheel event listener. We set onWheel to a function that logs the event object. Now when we scroll up and down with the mouse wheel, we should see the event object logged.
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.
53
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
