Javascript - MouseWheel

Most modern browsers (except Safari) support the use of the mouse wheel.

I used it to zoom an image.

Unfortunately, the code is not standardized - as of May 2015, it has to be hacked together.

Initial code

This is the code that worked in Chrome. However, this code has a basic problem - when the image is zoomed, the web page also scrolls. The solution was to add the following which tells the browser that my code has found the event useful and that the browser should simply ignore it.

These, all suggested by various web pages, do not work with Chrome.


Well, the code above does not work in Firefox. From How to Use the Mouse Wheel Event in HTML5 Pages, this attaches the event. The value indicating how far the wheel moved, and its direction, is also different with FireFox (!@#$%!!!) The following code sets delta to either +1 or -1 in all browsers.

Notice that this example discards the event passed via the function parameter in order to support older browsers .. I normally leave that out.

In a related case, when you want lots of elements calling the same function, you need special code (yet again) to make it work in FireFox.

These are fragments of the code I used for a project. In another program, the following worked in chrome, but not in Firefox 24.0 - the object event was known in Chrome without being explicitly passed. Firefox 24.0 produces (in debug mode)

The examples above work fine when the mouse wheel does all the work. However, for edit fields I want to point all the fields to a common event handler and then have the assocaited onchange event called. Unfortunately, that is not how javascript works. I tried to find a way to call (or trigger) the event from the existing handler - but I never found a way to accomplish that.

Instead, I assign a function to the oninput property and, if it is assigned, the program calls it. This also has the side effect (in Chrome at least) that the function is called as the user types into the field. To be clear, I never attached an EventListener but just assigned the function to the property. (I have no idea if the property stores a pointer (address) to the function or a copy of the function itself. The documentation is not clear about this.)

Firefox is a !@##$$ - without a doubt!! This does not cause Firefox to crash - it does not work or cause problems. However, the following works in Chrome but fails in Firefox. To fix it in Firefox, the input parameter must be specified. Normally, the mouse wheel is used to scroll a web page. However, when using the mouse to change the number in a field, the default action must be stopped.

For reasons beyond comprehension, with Firefox, the first time the event handler was called, delta was zero. As a result event.preventDefault made it so that the handler never did anything useful. The following fixed the page scrolling and allowed the mouse wheel to perform like it did before.

I have used this code before (without the if statement) without any problems. I don't know why it is a problem now. Perhaps it is becuase I am using an input field, and previously I used a canvas (to display a zoomable map)?

A more generic fix would be

Javascript - write once, debug everywhere! (Just like Java!)


In summary ??, there appear to be 3 separate ways to handle the mouse wheel. (This page is necessary because most references I found only mention one!)

Author: Robert Clemenzi
URL: http:// / Languages / Javascript / MouseWheel.html