鼠标滚轮事件(兼容IE、FireFox、Chrome等浏览器)

最新推荐文章于 2024-08-18 13:52:08 发布

lijunlinlijunlin

最新推荐文章于 2024-08-18 13:52:08 发布

阅读量7.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： javaScript

本文链接：https://blog.youkuaiyun.com/lijunlinlijunlin/article/details/40711437

javaScript 专栏收录该内容

55 篇文章

订阅专栏

本文介绍了一种在不同浏览器上监听鼠标滚轮事件的方法，并详细解释了如何通过JavaScript实现跨浏览器的滚轮事件监听功能。文章针对IE、Firefox、Chrome等浏览器的不同特性，提供了兼容性的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
       <title>鼠标滚轮事件</title>
       <script type="text/javascript">
           // 鼠标滑轮滚动后执行的函数
           // delta > 0 = 向上滚动
           // delta < 0 = 向下滚动
           //Firefox只识别DOMMouseScroll
           var mousewheelevt=(/Firefox/i.test(navigator.userAgent))?"DOMMouseScroll": "mousewheel";
           function fmousewheelEvent(e, delta) {
               document.getElementById("test").innerHTML += (delta + "");
               alert("aa");
           }

           //判断是否是IE
           if (document.attachEvent) {
               document.attachEvent("on"+mousewheelevt, function(e) {
                   mousewheelEvent(e, e.wheelDelta);
               });

}

           //FireFox(DOMMouseScroll)、Chrome、Opera、safari
           else if (document.addEventListener) {
               document.addEventListener(mousewheelevt, function(e) {
                   e=e || window.event;
                   if(e.detail){//Firefox
                       mousewheelEvent(e, e.detail*40);
                   }
                   else if(e.wheelDelta){
                       mousewheelEvent(e, e.wheelDelta);
                   }
               }, false);
           }
       </script>
   </head>
   <body>
       <div id="test"></div>
   </body>
</html>