您现在的位置:首页 --> JavaScript --> js中鼠标滚轮事件详解
js中鼠标滚轮事件详解
浏览:2467次 出处信息
附加事件
其中经我测试,IE/Opera属于同一类型,
以下是代码片段: /*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
判断滚轮向上或向下在浏览器中也要考虑兼容性,现在五大浏览器(
以下是代码片段: <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/
(部分图片见原文:http://www.51obj.cn/?
(以上内容部分内容参考了http://adomas.org/
建议继续学习:
- JS如何实现响应滚轮(同时设置滚动条无效) (阅读:8001)
- JS判断鼠标从什么方向进入一个容器 (阅读:4262)
- Js事件监听封装(支持匿名函数) (阅读:3596)
- jQuery事件编写进阶 (阅读:3389)
- jQuery事件的冒泡过程 (阅读:2928)
- 关于Javascript的俩个有趣的探讨 (阅读:2322)
- javascript事件:获取事件对象getEvent函数 (阅读:2231)
- 基于事件的社会化网站 (阅读:1888)
- 一种生成事件脉络的方法 (阅读:1800)
- C#的设计缺陷(1):显式实现接口内的事件 (阅读:1445)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
<< 前一篇:jquery.form.js,JQuery表单插件
后一篇:JavaScript 屏蔽右键 >>
文章信息
- 作者:cssrain@gmail.com 来源: 前端技术
- 标签: 事件 滚轮 鼠标
- 发布时间:2010-02-25 09:31:18
建议继续学习
近3天十大热文
- [53] IOS安全–浅谈关于IOS加固的几种方法
- [52] 如何拿下简短的域名
- [51] 图书馆的世界纪录
- [50] Oracle MTS模式下 进程地址与会话信
- [50] android 开发入门
- [49] Go Reflect 性能
- [46] 【社会化设计】自我(self)部分――欢迎区
- [46] 读书笔记-壹百度:百度十年千倍的29条法则
- [36] 程序员技术练级攻略
- [29] 视觉调整-设计师 vs. 逻辑