mousewheel事件无效

时间:2013-05-26 04:32:23

标签: javascript

我正在处理一个应用程序,我需要跟踪鼠标滚轮的移动,但我的功能在Internet Explorer中无法正常工作。它适用于所有其他浏览器,但不适用于IE,任何关于我做错的想法?​​

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

我在身体名称

中调用了setupMouseWheel函数onload
<body onload="setupMouseWheel();">

感谢您的帮助!

2 个答案:

答案 0 :(得分:15)

要收听鼠标滚轮,最好听取DOMMouseScrollmousewheelwheel。最后一个是IE,是唯一一个你没有听的人。

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

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

更新:注意到虽然你把它标记为jQuery,但你实际上并没有使用它。要在没有jQuery的情况下执行此操作,请按原样继续,但添加wheel事件侦听器,就像其他人一样。

答案 1 :(得分:3)

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

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