mousewheel事件的兼容方法
在垂直方向上滚动页面时,会触发mousewheel事件,这个事件会在任何元素上触发,最终都会冒泡到document(IE8)或window(IE9+及其他主流现代浏览器)对象。
在给元素指定mousewheel事件时,FireFox不支持使用onmousewheel,而是支持一个名为DOMMouseScroll的事件。DOMMouseScroll与onmousewheel的区别是,前者只能通过DOM2级事件处理程序的方法,即addEventListener()方法添加事件处理程序,而后者可以使用DOM0级(element.onmousewheel=function() {})和DOM2级事件处理程序的方法添加事件处理程序。
为了在不同浏览器中能使用一样的代码,我想了一个给元素添加mousewheel事件的通用方法。下面是代码:
function addMouseWheelEvent(element,func) { if (typeof element.onmousewheel == "object") {
element.onmousewheel = function() {
func();
};
} if (typeof element.onmousewheel == "undefined") {
element.addEventListener("DOMMouseScroll",func,false);
}
}
方法的名称是addMouseWheelEvent,该方法接收两个参数:element表示要添加mousewheel事件的元素节点,func表示作为事件处理程序的函数。使用方法是直接调用该函数并出入适当的参数即可:addMouseWheelEvent(element,func);
原理是:在支持onmousewheel的浏览器中element.onmousewheel的typeof值为object,在不支持onmousewheel的浏览器中element.onmousewheel的typeof值为undefined。可以根据typeof值的不同对浏览器进行能力检测,从而应用不同的添加事件处理程序的方法。
经过测试该方法在chrome、IE11和FireFox中能正常使用。
补充:
在给元素指定mousewheel事件时,对应的event对象会有一个wheelDelta属性(规范中的属性),当用户向前滚动滚轮时,其值是120的整数倍,当用户向后滚动滚轮时,其值是-120的整数倍。当然在FireFox中这个属性不叫wheelDelta,而是叫detail,当用户向前滚动滚轮时,detail的值是-3的整数倍,当用户向后滚动滚轮时,detail的值是3的整数倍,正负号与wheelDelta的值是相反的。
2017-5-12更新:现在看当初自己写的这个方法,实在是不怎么样。根据判断条件都用DOM2级添加事件的方法,还要传入事件对象,这样更合理。
mousewheel事件的兼容方法的更多相关文章
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符
js中对arry数组的各种操作小结 最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...
- DOM中事件绑定补充方法
先将上一篇文章中提到的为元素增加事件的方法和移除事件的方法拿过来: <span style="font-size:18px;">//跨浏览器添加事件 function ...
- JS事件及其兼容用法
JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间. 1.事件流:描述的是从页面中接收事件的顺序. IE提出的事件冒泡流:事件开始由最具体的 ...
- jquery扩展鼠标mousewheel事件
最近项目中要有个鼠标在图片上滚动实现图片放大和缩小的得到功能,隐约的记得好像记得有个 mousewheel 事件,可以实现需求,于是乎,开始在网上查找这一方法,但是,出乎意料的结果,各浏览器对此方法有 ...
- JS--事件对象中部份浏览器不兼容方法
测试时主要用的浏览器是Firefox 28.0.IE11.IE8.Chrome 34.0 一.什么是事件对象:当触发某个事件的时候,会产生一个事件对象,这个对象包含着所有的与事件有关的信息,包括导致 ...
- AJAX原理解析与兼容方法封装
AJAX常用参数 AJAX对象兼容 AJAX对象方法与属性 AJAX封装兼容方法源码 AJAX全称Asynchronous JavaScript and XML(异步的JavaScript与XML), ...
- 事件对象,arguments、事件的兼容问题
一.事件对象 1.每个元素身上是天生存在的,不需要我们去定义,只需要我们给这个事件绑定一个方法,当事件触发的时候,就会执行这个方法 2.事件绑定的方法: (1).DOM0级绑定:div . oncli ...
- [WPF]UserControl的MouseWheel事件触发
用户控件: <UserControl> <Grid> <TextBox x:Name="textBlock" HorizontalAlignment= ...
- jQuery绑定以及解除时间方法总结,以及事件触发的方法
一 off()和on() $("obj").on(event,[sesect],[data],fn);一般情况下参数只有两个,事件以及事件的处理函数 ...
随机推荐
- Spring MVC注解的一些案列
1. spring MVC-annotation(注解)的配置文件ApplicationContext.xml <?xml version="1.0" encoding=& ...
- 仿JQ基础架构,可扩展。
(function(win,doc,fn){ var events = [];//拷贝核心方法 var publicEvent = ["extend","f ...
- 测试函数用Return 返回值和用函数名返回值的区别
'*************************************************************************'**模 块 名:工程1 - Form1'**说 ...
- bgp多线
BGP(边界网关协议)主要用于互联网AS(自治系统)之间的互联,BGP的最主要功能在于控制路由的传播和选择最好的路由. 中国网通 .中国电信.中国铁通.教育网和一些大的民营IDC运营商都具有AS号,全 ...
- CQOI 2016 不同的最小割
题目大意:一个无向图,求所有点对不同的最小割种类数 最小割最多有n-1个,这n-1个最小割构成一个最小割树 分治法寻找n-1个最小割.对于当前点集X,任选两点为ST做最小割,然后找出与S相连的所有点和 ...
- Android-Parcelable
Parcelable和Serializable的区别: android自定义对象可序列化有两个选择一个是Serializable和Parcelable 一.对象为什么需要序列化 1.永久 ...
- SQL Server : Browser服务
SQL Server : Browser服务是SQL Server 2005新增的,简单的说,如果一个物理服务器上面有多个SQL Server实例,那么为了确保客户端能访问到正确的实例,所以SQL S ...
- 探索C#之虚拟桶分片
阅读目录 背景 虚拟桶(virtual buckets) 实现 总结 背景 关于数据分片讨论最多的是一致性hash,然而它并不是分布式设计中的银弹百试百灵. 在数据稳定性要求比较高的场景下它的缺点是不 ...
- SQL Server 系统数据库恢复
标签:SQL SERVER/MSSQL SERVER/数据库/DBA/故障恢复/master 概述 SQL Server 维护一组系统级数据库(称为“系统数据库”),这些数据库对于服务器实例的运行至关 ...
- maven仓库信息分析站点推荐
maven是java的一个依赖,打包管理的工具,稍微大一点的java项目都需要使用maven. 随着java的壮大,maven仓库越来越大,仓库中的jar包有60多万,各种group,各种构件,各种版 ...