原生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 相关文章推荐
基于jquery实现的服务器验证控件的启用和禁用代码
Apr 27 Javascript
JavaScript中合并数组的N种方法
Sep 16 Javascript
快速学习jQuery插件 Cookie插件使用方法
Dec 01 Javascript
Jquery实现上下移动和排序代码
Oct 17 Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
Nov 10 Javascript
JS冒泡事件与事件捕获实例详解
Nov 25 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
Jan 04 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
Nov 22 Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 jQuery
实例讲解JS中pop使用方法
Jan 27 Javascript
vue 实现通过vuex 存储值 在不同界面使用
Nov 11 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
Dec 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
PHP封装的一个支持HTML、JS、PHP重定向的多功能跳转函数
2014/06/19 PHP
详解WordPress中过滤链接与过滤SQL语句的方法
2015/12/18 PHP
PHP编写daemon process详解及实例代码
2016/09/30 PHP
centos下file_put_contents()无法写入文件的原因及解决方法
2017/04/01 PHP
JavaScript Base64编码和解码,实现URL参数传递。
2006/09/18 Javascript
JS效率个人经验谈(8-15更新),加入range技巧
2007/01/09 Javascript
js去字符串前后空格5种实现方法及比较
2013/04/03 Javascript
javasript实现密码的隐藏与显示
2015/05/08 Javascript
jQuery实用技巧必备(下)
2015/11/03 Javascript
用window.onerror捕获并上报Js错误的方法
2016/01/27 Javascript
JS动态插入并立即执行回调函数的方法
2016/04/21 Javascript
AngularJs Understanding the Model Component
2016/09/02 Javascript
Vue.directive自定义指令的使用详解
2017/03/10 Javascript
Vue声明式渲染详解
2017/05/17 Javascript
利用node.js实现反向代理的方法详解
2017/07/24 Javascript
Vue拖拽组件开发实例详解
2018/05/11 Javascript
angular实现input输入监听的示例
2018/08/31 Javascript
微信小程序如何再次获取用户授权的方法
2019/05/10 Javascript
vue中使用极验验证码的方法(附demo)
2019/12/04 Javascript
原生js实现照片墙效果
2020/10/13 Javascript
[00:36]DOTA2勇士令状莱恩声望物品——冥晶之厄展示
2018/05/25 DOTA
简单介绍Python中的JSON使用
2015/04/28 Python
python爬取酷狗音乐排行榜
2019/02/20 Python
Python 创建TCP服务器的方法
2020/07/28 Python
浅谈如何使用python抓取网页中的动态数据实现
2020/08/17 Python
Windows下pycharm安装第三方库失败(通用解决方案)
2020/09/17 Python
python 利用toapi库自动生成api
2020/10/19 Python
夏尔巴人登珠峰品牌:Sherpa Adventure Gear
2018/02/08 全球购物
在线吉他课程,学习如何弹吉他:Fender Play
2019/02/28 全球购物
和睦家庭事迹
2014/05/14 职场文书
乡镇食品安全责任书
2014/07/28 职场文书
环卫工作个人总结
2015/03/04 职场文书
机修车间主任岗位职责
2015/04/08 职场文书
赢在执行观后感
2015/06/16 职场文书
小学班主任心得体会
2016/01/07 职场文书
创业计划之特色精品店
2019/08/12 职场文书