javascript 鼠标滚轮事件在 ie 中不起作用

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16756260/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 05:53:02  来源:igfitidea点击:

mousewheel event is not working in ie

javascript

提问by Juan Gonzales

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

我正在开发一个应用程序,我需要跟踪鼠标滚轮的移动,但我的功能在 Internet Explorer 中没有像我期望的那样工作。它适用于所有其他浏览器,但不适用于 IE,对我做错了什么有任何想法吗?

JS...

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 am calling the setupMouseWheel function onload in the body aka

我在体内调用 setupMouseWheel 函数 onload 又名

<body onload="setupMouseWheel();">

Thanks for the help!

谢谢您的帮助!

采纳答案by Juan Gonzales

I finally found a great cross browser approach here for anyone who has a similar issue

我终于在这里找到了一个很好的跨浏览器方法,适用于任何有类似问题的人

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

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

回答by Dave

To listen to the mouse wheel, it's best to listen to DOMMouseScroll, mousewheeland wheel. The last one is IE, and is the only one you're not listening for.

要听鼠标滚轮,最好听DOMMouseScroll,mousewheelwheel。最后一个是 IE,并且是唯一一个你没有在听的。

I'll also point out that jQuery has a shortcut for binding multiple events:

我还要指出 jQuery 有一个绑定多个事件的快捷方式:

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

update: noticed that though you tagged this as jQuery, you're not actually using it. To do this without jQuery, just carry on as you are but add a wheelevent listener like the others.

更新:请注意,尽管您将其标记为 jQuery,但您实际上并未使用它。要在没有 jQuery 的情况下执行此操作,只需按原样继续操作,但要wheel像其他人一样添加一个事件侦听器。