Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why does Firefox not pass all mouse wheel events to my javascript application?

I'm using the protovis library (http://mbostock.github.com/protovis/) to draw a graph.
I uploaded the code I'm using in case someone wants to take a look at it:
http://jsfiddle.net/zobel/brEAD/

Here is my problem: Under Firefox, when I use the mouse wheel to zoom in or out, some mouse wheel events are not captured by my application but by Firefox itself. The result is that i end up getting a mix of zooms and page scrolls. You can test this by shrinking the Firefox window until the scroll bar gets visible.
This problem does not occur under Opera. Why does it happen and how can I solve it?
Thanks a lot in advance.

like image 546
zobel Avatar asked Jul 05 '11 12:07

zobel


People also ask

What is wheel delta?

wheelDelta, wheelDeltaX and wheelDeltaY value. 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.

What is DOMMouseScroll?

The DOM DOMMouseScroll event is fired asynchronously when mouse wheel or similar device is operated and the accumulated scroll amount is over 1 line or 1 page since last event. It's represented by the MouseScrollEvent interface. This event was only implemented by Firefox.

What is Mousewheel JS?

About Mousewheel JS Mousewheel is a jQuery plugin that adds cross-browser mouse wheel support. Also, Scroll distance can be measured using Delta normalization.


1 Answers

May be a bug (or simple omission) in the JavaScript library. The library needs to preventDefault() on the DOMMouseScroll event.

Thanks to event bubbling, you can do this yourself on any DOM object that's a parent node of the graph. Here's one simple example:

document.body.addEventListener('DOMMouseScroll', function(e){
    e.preventDefault();
}, false);

This won't work in older versions of IE, since it doesn't support addEventListener, but you get the point. I recommend using another general-purpose JavaScript library (like jQuery), and use that to set your event handler.

like image 110
jimbo Avatar answered Sep 18 '22 22:09

jimbo