原生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操纵Cookie实现购物车程序
Feb 15 Javascript
判断是否安装flash player及当前版本的JS代码
Aug 08 Javascript
jQuery 跨域访问解决原理案例详解
Jul 09 Javascript
JS面试题---关于算法台阶的问题
Jul 26 Javascript
JavaScript生成验证码并实现验证功能
Sep 24 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
Dec 13 Javascript
详谈commonjs模块与es6模块的区别
Oct 18 Javascript
Vue父子组建的简单通信之控制开关Switch的实现
Jun 04 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
JavaScript实现的九种排序算法
Mar 04 Javascript
浅谈layer弹出层按钮颜色修改方法
Sep 11 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
Nov 04 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
解析关于java,php以及html的所有文件编码与乱码的处理方法汇总
2013/06/24 PHP
Symfony2开发之控制器用法实例分析
2016/02/05 PHP
php微信开发之百度天气预报
2016/11/18 PHP
mailto的使用技巧分享
2012/12/21 Javascript
Javascript验证上传图片大小[前台处理]
2014/07/18 Javascript
html文档中的location对象属性理解及常见的用法
2014/08/13 Javascript
取得元素的左和上偏移量的方法
2014/09/17 Javascript
jquery实现动静态条形统计图
2015/08/17 Javascript
js图片轮播特效代码分享
2015/09/07 Javascript
js实现的后台左侧管理菜单代码
2015/09/11 Javascript
JS实现输入框提示文字点击时消失效果
2016/07/19 Javascript
ajax的分页查询示例(不刷新页面)
2017/01/11 Javascript
js 动态生成html 触发事件传参字符转义的实例
2017/02/14 Javascript
react native与webview通信的示例代码
2017/09/25 Javascript
js JSON.stringify()基础详解
2019/06/19 Javascript
JS面试题中深拷贝的实现讲解
2020/05/07 Javascript
对vuex中store和$store的区别说明
2020/07/24 Javascript
jQuery实现异步上传一个或多个文件
2020/08/17 jQuery
Python正则表达式非贪婪、多行匹配功能示例
2017/08/08 Python
Python入门之三角函数atan2()函数详解
2017/11/08 Python
python matplotlib画图实例代码分享
2017/12/27 Python
python 保存float类型的小数的位数方法
2018/10/17 Python
实时获取Python的print输出流方法
2019/01/07 Python
Python实现查找数组中任意第k大的数字算法示例
2019/01/23 Python
Python pip替换为阿里源的方法步骤
2019/07/02 Python
python函数的万能参数传参详解
2019/07/26 Python
Python 日期区间处理 (本周本月上周上月...)
2019/08/08 Python
在python中创建指定大小的多维数组方式
2019/11/28 Python
Python实现随机生成任意数量车牌号
2020/01/21 Python
Scrapy实现模拟登录的示例代码
2021/02/21 Python
介绍下Lucene建立索引的过程
2016/03/02 面试题
求职信内容考虑哪几点
2013/10/05 职场文书
天猫活动策划方案
2014/08/21 职场文书
抢劫罪辩护词
2015/05/21 职场文书
金陵十三钗观后感
2015/06/04 职场文书
幼儿园小班教师随笔
2015/08/14 职场文书