js获取页面中的鼠标滚轮事件

最新推荐文章于 2024-08-14 17:15:24 发布

暮志未晚NAN

最新推荐文章于 2024-08-14 17:15:24 发布

阅读量5.9k

点赞数

分类专栏： javascript 文章标签：鼠标滑轮滚动事件 javascript 事件

本文链接：https://blog.csdn.net/qq_30100043/article/details/69567382

版权

javascript 专栏收录该内容

73 篇文章 2 订阅

订阅专栏

附加事件

其中经我测试，IE/Opera属于同一类型，使用attachEvent即可添加滚轮事件。

/*IE注册事件*/

if(document.attachEvent){

document.attachEvent('onmousewheel',scrollFunc);

}

Firefox使用addEventListener添加滚轮事件

/*Firefox注册事件*/
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}

Safari与Chrome属于同一类型，可使用HTML DOM方式添加事件

window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome

其中除Firefox外其余均可使用HTML DOM方式添加事件，因此添加事件使用以下方式

/*注册事件*/
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}//W3C
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome

detail与wheelDelta

判断滚轮向上或向下在浏览器中也要考虑兼容性，现在五大浏览器（IE、Opera、Safari、Firefox、Chrome）中Firefox 使用detail，其余四类使用wheelDelta；两者只在取值上不一致，代表含义一致，detail与wheelDelta只各取两个值，detail只取±3，wheelDelta只取±120，其中正数表示为向上，负数表示向下。

在非firefox浏览器中，滚轮向上滚动返回的数值是120，向下滚动返回-120
而在firefox浏览器中，滚轮向上滚动返回的数值是-3，向下滚动返回3

测试代码：

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        html, body{
            height: 100%;
            margin: 0;
            padding: 0;
        }
        *{margin:0; padding:0;}
        #map {
            height: 100%;
        }
    </style>
</head>
<body>
<p><label for="wheelDelta"> 浏览器类型:</label>(IE/Opera)<input type="text" id="wheelDelta"/></p>
<p><label for="detail"> 滚动值:</label><input type="text" id="detail"/></p>
<script type="text/javascript">
    var scrollFunc = function (e) {
        e = e || window.event;

        var t1 = document.getElementById("wheelDelta");
        var t2 = document.getElementById("detail");
        if (e.wheelDelta) {//IE/Opera/Chrome
            t1.value = "IE、Opera、Safari、Chrome";
            t2.value = e.wheelDelta;
        } else if (e.detail) {//Firefox
            t1.value = "Firefox";
            t2.value = e.detail;
        }
        //ScrollText(direct);
    }
    /*注册事件*/
    if (document.addEventListener) {
        document.addEventListener('DOMMouseScroll', scrollFunc, false);
    }//W3C
    window.onmousewheel = document.onmousewheel = scrollFunc;//IE/Opera/Chrome/Safari
</script>
</body>
</html>