您现在的位置:首页 --> JavaScript --> js中鼠标滚轮事件详解
js中鼠标滚轮事件详解
浏览:2450次 出处信息
附加事件
其中经我测试,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如何实现响应滚轮(同时设置滚动条无效) (阅读:7993)
- JS判断鼠标从什么方向进入一个容器 (阅读:4249)
- Js事件监听封装(支持匿名函数) (阅读:3578)
- jQuery事件编写进阶 (阅读:3375)
- jQuery事件的冒泡过程 (阅读:2917)
- 关于Javascript的俩个有趣的探讨 (阅读:2315)
- javascript事件:获取事件对象getEvent函数 (阅读:2225)
- 基于事件的社会化网站 (阅读:1878)
- 一种生成事件脉络的方法 (阅读:1791)
- C#的设计缺陷(1):显式实现接口内的事件 (阅读:1434)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
<< 前一篇:jquery.form.js,JQuery表单插件
后一篇:JavaScript 屏蔽右键 >>
文章信息
- 作者:cssrain@gmail.com 来源: 前端技术
- 标签: 事件 滚轮 鼠标
- 发布时间:2010-02-25 09:31:18
建议继续学习
近3天十大热文
- [67] Go Reflect 性能
- [67] Oracle MTS模式下 进程地址与会话信
- [67] 如何拿下简短的域名
- [61] IOS安全–浅谈关于IOS加固的几种方法
- [60] 图书馆的世界纪录
- [59] 【社会化设计】自我(self)部分――欢迎区
- [58] android 开发入门
- [56] 视觉调整-设计师 vs. 逻辑
- [49] 给自己的字体课(一)——英文字体基础
- [47] 界面设计速成