技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> JavaScript --> js中鼠标滚轮事件详解

js中鼠标滚轮事件详解

浏览:2450次  出处信息
之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用js对鼠标滚轮事件进行控制,滚轮事件其中考虑浏览器兼容性问题

附加事件

其中经我测试,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,其中正数表示为向上,负数表示向下。

以下是代码片段:
   <p><label for="wheelDelta"> 滚动值:</label>(IE/Opera)<input type="text" id="wheelDelta" /></p>
   <p><label for="detail"> 滚动值:(Firefox)</label><input type="text" id="detail" /></p>
   <script type="text/javascript">
   var oTxt=document.getElementById("txt");
   /***********************
   * 函数:判断滚轮滚动方向
   * 作者:walkingp
   * 参数:event
   * 返回:滚轮方向 1:向上 -1:向下
   *************************/
   var scrollFunc=function(e){
       var direct=0;
       e=e || window.event;

       var t1=document.getElementById("wheelDelta");
       var t2=document.getElementById("detail");
       if(e.wheelDelta){//IE/Opera/Chrome
           t1.value=e.wheelDelta;
       }else if(e.detail){//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>


预览效果http://www.51obj.cn/demo/js/wheelDelta_detail.html

(部分图片见原文:http://www.51obj.cn/?p=637
(以上内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ 

建议继续学习:

  1. JS如何实现响应滚轮(同时设置滚动条无效)    (阅读:7993)
  2. JS判断鼠标从什么方向进入一个容器    (阅读:4249)
  3. Js事件监听封装(支持匿名函数)    (阅读:3578)
  4. jQuery事件编写进阶    (阅读:3375)
  5. jQuery事件的冒泡过程    (阅读:2917)
  6. 关于Javascript的俩个有趣的探讨    (阅读:2315)
  7. javascript事件:获取事件对象getEvent函数    (阅读:2225)
  8. 基于事件的社会化网站    (阅读:1878)
  9. 一种生成事件脉络的方法    (阅读:1791)
  10. C#的设计缺陷(1):显式实现接口内的事件    (阅读:1434)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1