All geek questions in one place

Mousewheel event not working in ie

I am working on an application, and I need to track the movement of the mouse wheel, but my functions do not work as I expect in Internet Explorer. It works in all other browsers, but not in IE, any ideas on what I am doing wrong?

Js ...

var request = true; var onMouseWheelSpin = function(event) { if(request === true){ request = false; var nDelta = 0; if (!event) { event = window.event; } // cross-bowser handling of eventdata to boil-down delta (+1 or -1) if ( event.wheelDelta ) { // IE and Opera nDelta= event.wheelDelta; if ( window.opera ) { // Opera has the values reversed nDelta= -nDelta; } } else if (event.detail) { // Mozilla FireFox nDelta= -event.detail; } if (nDelta > 0) { zoomFun( 1, event ); } if (nDelta < 0) { zoomFun( -1, event ); } if ( event.preventDefault ) { // Mozilla FireFox event.preventDefault(); } event.returnValue = false; // cancel default action } } var zoomFun = function(delta,e) { if(delta > 0){ // zoom in alert("In"); }else{ // zoom out alert("Out"); } request = true; } var setupMouseWheel = function(){ // for mouse scrolling in Firefox var elem = document.getElementById("zoom"); if (elem.addEventListener) { // all browsers except IE before version 9 // Internet Explorer, Opera, Google Chrome and Safari elem.addEventListener ("mousewheel", onMouseWheelSpin, false); // Firefox elem.addEventListener ("DOMMouseScroll", onMouseWheelSpin, false); }else{ if (elem.attachEvent) { // IE before version 9 elem.attachEvent ("onmousewheel", onMouseWheelSpin); } } }

I call the setupMouseWheel onload function in aka body

 <body onload="setupMouseWheel();">

Thanks for the help!

+4
source share
2 answers

I finally found a great cross-browser approach for everyone who has a similar problem.

https://developer.mozilla.org/en-US/docs/Web/Reference/Events/wheel

+3
source

To listen to the mouse wheel, it is best to listen to DOMMouseScroll , mousewheel and wheel . The last one is IE, and this is the only one you are not listening to.

I will also point out that jQuery has a shortcut to bind multiple events:

  $(elem).on("DOMMouseScroll mousewheel wheel", onMouseWheelSpin);

update: noticed that although you marked it as jQuery, you are not actually using it. To do this without jQuery, just continue as you do, but add a wheel event listener like the rest.

+14
source

Source: https://habr.com/ru/post/1482786/

More articles:


All Articles