原生JS绑定滑轮滚动事件兼容常见浏览器


Posted in Javascript onJune 30, 2014

滑轮滚动页面的事件在网页特效中进场遇到,但是在不同浏览器下的实现方式又不同。下面我实现的方法,兼容常见浏览器。

function getData(event){ 
var e = event || window.event; 
//获取滚动距离(FF每次滚动 data为3或者-3,其他为120或者-120) 
var data = e.detail || e.wheelDelta; 
alert(data); 
} 

//IE之外的绑定事件方法 
if(document.addEventListener && !document.attachEvent) 
{ 
document.addEventListener('mousewheel',getData); 
//FF绑定滚动事件 
document.addEventListener('DOMMouseScroll',getData); 
} 
//IE 
else if(document.attachEvent && !document.addEventListener){ 
document.attachEvent('onmousewheel',getData); 
}else{ 
window.onmousewheel = getData; 
}

代码中值得注意的地方:

1 为什么使用document.addEventListener && !document.attachEvent来区分IE?

attachEvent和detachEvent是IE特有的绑定事件和解绑事件的方法,只有在IE中存在此方法。但是在IE9+浏览器中有实现了较为通用的addEventListener方法来绑定事件。浏览器中有document.addEventListener 方法就可以排除不是IE8及其以下版本的,但是包括了IE9+浏览器,所以后面使用 &&!document.attachEvent来排除IE9+浏览器。

2 值得注意的就是在FF浏览器中没有mousewheel事件,触发滚动的时间是DOMMouseScroll。

3 还有一点值得注意的就是在使用addEventListener绑定事件的时候,事件名前面不加on,而在IE中使用attachEvent绑定事件的时候需要加上on。

Javascript 相关文章推荐
JavaScript中的isXX系列是否继续使用的分析
Apr 16 Javascript
javascript中的数字与字符串相加实例分析
Aug 14 Javascript
JS弹出可拖拽可关闭的div层完整实例
Feb 13 Javascript
jQuery实现下滑菜单导航效果代码
Aug 25 Javascript
jQuery ready()和onload的加载耗时分析
Sep 08 Javascript
js实现文本上下来回滚动
Feb 03 Javascript
详解webpack打包vue时提取css
May 26 Javascript
SVG动画vivus.js库使用小结(实例代码)
Sep 14 Javascript
weebox弹出窗口不居中显示的解决方法
Nov 27 Javascript
JS代码实现电脑配置检测功能
Mar 21 Javascript
Vue.js 十五分钟入门图文教程
Sep 12 Javascript
微信小程序:报错(in promise) MiniProgramError
Oct 30 Javascript
js实现的点击div区域外隐藏div区域
Jun 30 #Javascript
js实现特定位取反原理及示例
Jun 30 #Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
Jun 30 #Javascript
jQuery+ajax实现鼠标单击修改内容的思路
Jun 29 #Javascript
html文本框提示效果的示例代码
Jun 28 #Javascript
使用delegate方法为一个tr标签加一个链接
Jun 27 #Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
Jun 27 #Javascript
You might like
PR值查询 | PageRank 查询
2006/12/20 PHP
PHP合并数组+与array_merge的区别分析
2010/08/01 PHP
codeigniter教程之多文件上传使用示例
2014/02/11 PHP
php从给定url获取文件扩展名的方法
2015/03/14 PHP
PHP简单实现防止SQL注入的方法
2018/03/13 PHP
csdn 论坛技术区平均给分功能
2009/11/07 Javascript
javascript之通用简单的table选项卡实现(二)
2010/05/09 Javascript
JS事件在IE与FF中的区别详细解析
2013/11/20 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
2014/04/12 Javascript
原生js编写autoComplete插件
2016/04/13 Javascript
js实现可输入可选择的select下拉框
2016/12/21 Javascript
nodejs连接mysql数据库简单封装示例-mysql模块
2017/04/10 NodeJs
AngularJS 打开新的标签页实现代码
2017/09/07 Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
2018/03/29 Javascript
Vue入门之数量加减运算操作示例
2018/12/11 Javascript
小程序中英文混合排序问题解决
2019/08/02 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
2020/04/23 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
2020/05/17 Javascript
Vue基本指令实例图文讲解
2021/02/25 Vue.js
对于Python异常处理慎用“except:pass”建议
2015/04/02 Python
在Python下利用OpenCV来旋转图像的教程
2015/04/16 Python
pymongo给mongodb创建索引的简单实现方法
2015/05/06 Python
python结合opencv实现人脸检测与跟踪
2015/06/08 Python
浅谈python中真正关闭socket的方法
2018/12/18 Python
Django之编辑时根据条件跳转回原页面的方法
2019/08/21 Python
python实现简单井字棋小游戏
2020/03/05 Python
香港永安旅游网:Wing On Travel
2017/04/10 全球购物
预订奥兰多和佛罗里达州公园门票:FloridaTix
2018/01/03 全球购物
Sport-Thieme荷兰:购买体育用品
2019/08/25 全球购物
Java平台和其他软件平台有什么不同
2015/06/05 面试题
计算机专业优秀大学生自我总结
2014/01/21 职场文书
岗位职责的构建方法
2014/02/01 职场文书
小学优秀班主任材料
2014/12/17 职场文书
2015高三毕业寄语赠言
2015/02/27 职场文书
校园安全主题班会
2015/08/12 职场文书
2019通用版新员工入职培训方案!
2019/07/11 职场文书