I used it to zoom an image.

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

var canvas = document.getElementById("mapCanvas"); canvas.addEventListener("mousewheel", function(event){ // anonymous function, has no name var evt = mouseXY(event); var delta = event.wheelDelta ; // The -0.5 represents the middle of the map var current_x = -translatePos.x + (evt.clientX/canvas.width -0.5)*coord.w/scale; var current_y = -translatePos.y + (evt.clientY/canvas.height-0.5)*coord.h/scale; if (delta > 0){ scale *= scaleMultiplier; scale = Math.min(scale,32.0); // changed from 8 to 32 because some stations are very close } else { scale /= scaleMultiplier; scale = Math.max(scale,1.0) } translatePos.x = (evt.clientX/canvas.width -0.5)*coord.w/scale - current_x ; // move old position under mouse translatePos.y = (evt.clientY/canvas.height-0.5)*coord.h/scale - current_y ; // clipping may cause some motion bound(); // this limits the scroll bounds drawMap(); }); drawMap(); }; // get mouse coordinates in canvas function mouseXY( e ) { var rect = document.getElementById("mapCanvas").getBoundingClientRect(); return { clientX:(e.clientX-rect.left), clientY:(e.clientY-rect.top) } }

event.preventDefault(); // works with both Chrome and FireFox

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

return false; // some claim this is for jQuery only event.stopPropagation(); // does not work with Chrome or FireFox event.stopImmediatePropagation(); // does not work with Chrome or FireFox

var myimage = document.getElementById("myimage"); if (myimage.addEventListener) { // IE9, Chrome, Safari, Opera myimage.addEventListener("mousewheel", MouseWheelHandler, false); // Firefox myimage.addEventListener("DOMMouseScroll", MouseWheelHandler, false); // IE 6/7/8 } else myimage.attachEvent("onmousewheel", MouseWheelHandler);

• The property name is different
• The returned value is different
• The sign of the value is different

function MouseWheelHandler(e) { // cross-browser wheel delta var e = window.event || e; // old IE support - I normaly leave this line out var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));

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.

// var image = event.srcElement; // everythig except FireFox var image = event.target || event.srcElement; // includes FireFox

var canvas = document.getElementById("mapCanvas"); window.onload = function() { // 2 events are required to support both Chrome and FireFox canvas.addEventListener("mousewheel", function(event){ zoomMap(event); }); // Chrome method canvas.addEventListener("DOMMouseScroll", function(event){ zoomMap(event); }); // FireFox method } zoomMap = function(event) // the actual function is much larger than this { var evt = mouseXY(event); // var delta = event.wheelDelta ; // works in Chrome, will not work in FireFox var delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail))); // works with both Chrome and FireFox // stop the browser from scrolling the entire page event.stopPropagation(); // does not work with Chrome or Firefox event.stopImmediatePropagation(); // does not work with Chrome or Firefox event.preventDefault(); // works with both Chrome and FireFox var x = evt.clientX; var y = evt.clientY; }

mcAlgorithmw.addEventListener("wheel", function(){ mcAlgorithmw_Wheel(); }) ; mcAlgorithmw_Wheel = function (){ // fails in Firefox 24.0 var delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail))); // works with Chrome }

event is not defined

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.)

mcPressureText.addEventListener("wheel", function() { mcNumber_Wheel() ; }) ; // for Chrome mcPressureText.addEventListener("DOMMouseScroll", function(event){ mcNumber_Wheel(event); }) ; // for Firefox mcPressureText.oninput = Temp_pressure_Change;

mcTemp_K_UIText.addEventListener("wheel", function(event){ mcNumber_Wheel(event); }) ; // Chrome method mcTemp_K_UIText.addEventListener("DOMMouseScroll", function(event){ mcNumber_Wheel(event); }) ; // for Firefox

mcTemp_K_UIText.addEventListener("wheel", mcNumber_Wheel ) ; // Chrome method

function mcNumber_Wheel(){ var delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail))); // works with both Chrome and FireFox var target = event.target; }

function mcNumber_Wheel(event){ var delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail))); // works with both Chrome and FireFox var target = event.target; }

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.

if (delta!=0) event.preventDefault(); // works with both Chrome and FireFox

A more generic fix would be

if (delta==0) return; // zero values have no use

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

How to Use the Mouse Wheel Event in HTML5 Pages

This is the main source of the code above .. except that it suggests using return false; - which does not work - to stop the page from scrolling.

The onmousewheel event of JavaScript

This is a very good page which explains, and fixes, some of the cross browser problems. It includes

if (evt.preventDefault) //disable default wheel action of scrolling page evt.preventDefault() else return false

• wheel
• mousewheel
• Firefox method

URL: http:// mc-computing.com / Languages / Javascript / MouseWheel.html