鼠标滚轮的兼容写法

最新推荐文章于 2025-07-10 16:27:09 发布

原创最新推荐文章于 2025-07-10 16:27:09 发布 · 2.3k 阅读

1 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

87 篇文章

订阅专栏

本文介绍如何在不同浏览器中实现鼠标滚轮事件的统一处理，并提供了针对IE6/7/8、IE9+、Firefox及旧版Firefox的兼容性解决方案。重点展示了通过addEventListener和attachEvent方法监听mousewheel、wheel、DOMMouseScroll事件，以及如何阻止默认行为和获取滚动方向。

var addMouseWheelHandler = function(){
    if (document.addEventListener) {
        document.addEventListener('mousewheel', MouseWheelHandler, false); //IE9, Chrome, Safari, Oper
        document.addEventListener('wheel', MouseWheelHandler, false); //Firefox
        document.addEventListener('DOMMouseScroll', MouseWheelHandler, false); //Old Firefox
    } else {
        document.attachEvent('onmousewheel', MouseWheelHandler); //IE 6/7/8
    }
},
removeMouseWheelHandler = function(){
    if (document.addEventListener) {
        document.removeEventListener('mousewheel', MouseWheelHandler, false); //IE9, Chrome, Safari, Oper
        document.removeEventListener('wheel', MouseWheelHandler, false); //Firefox
        document.removeEventListener('DOMMouseScroll', MouseWheelHandler, false); //old Firefox
    } else {
        document.detachEvent('onmousewheel', MouseWheelHandler); //IE 6/7/8
    }
},
stopDefault = function(e) { 
    //W3C
    if ( e && e.preventDefault ) 
        e.preventDefault(); 
    //IE 
    else
        window.event.returnValue = false; 
    return false; 
},
MouseWheelHandler = function(e) {//滚动后的处理函数
    stopDefault(e);
    var e = e || window.event,
        value = e.wheelDelta || -e.deltaY || -e.detail,
        delta = Math.max(-1, Math.min(1, value));
    if (delta < 0) {//scrolling down
         console.log("下滑")
     
    }else {//scrolling up
     	console.log("上滑")    
    }
};
 
//调用
addMouseWheelHandler();
</script>