在垂直方向上滚动页面时,会触发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事件的兼容方法的更多相关文章

  1. js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符

    js中对arry数组的各种操作小结   最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...

  2. DOM中事件绑定补充方法

    先将上一篇文章中提到的为元素增加事件的方法和移除事件的方法拿过来: <span style="font-size:18px;">//跨浏览器添加事件 function ...

  3. JS事件及其兼容用法

    JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间. 1.事件流:描述的是从页面中接收事件的顺序. IE提出的事件冒泡流:事件开始由最具体的 ...

  4. jquery扩展鼠标mousewheel事件

    最近项目中要有个鼠标在图片上滚动实现图片放大和缩小的得到功能,隐约的记得好像记得有个 mousewheel 事件,可以实现需求,于是乎,开始在网上查找这一方法,但是,出乎意料的结果,各浏览器对此方法有 ...

  5. JS--事件对象中部份浏览器不兼容方法

    测试时主要用的浏览器是Firefox 28.0.IE11.IE8.Chrome 34.0  一.什么是事件对象:当触发某个事件的时候,会产生一个事件对象,这个对象包含着所有的与事件有关的信息,包括导致 ...

  6. AJAX原理解析与兼容方法封装

    AJAX常用参数 AJAX对象兼容 AJAX对象方法与属性 AJAX封装兼容方法源码 AJAX全称Asynchronous JavaScript and XML(异步的JavaScript与XML), ...

  7. 事件对象,arguments、事件的兼容问题

    一.事件对象 1.每个元素身上是天生存在的,不需要我们去定义,只需要我们给这个事件绑定一个方法,当事件触发的时候,就会执行这个方法 2.事件绑定的方法: (1).DOM0级绑定:div . oncli ...

  8. [WPF]UserControl的MouseWheel事件触发

    用户控件: <UserControl> <Grid> <TextBox x:Name="textBlock" HorizontalAlignment= ...

  9. jQuery绑定以及解除时间方法总结,以及事件触发的方法

     一   off()和on()          $("obj").on(event,[sesect],[data],fn);一般情况下参数只有两个,事件以及事件的处理函数     ...

随机推荐

  1. photoshop

    photoshop裁剪 photoshop裁剪快捷键是C键: 使用photoshop裁剪工具裁切出图片的方法: 选择好所需要的图片,右键保存到本地计算机' 在photoshop中打开这张图片(文件/打 ...

  2. ubuntu中source insight打不开,报错pagefault的解决方法

    在ubuntu中装了source insight用来看代码. 但用了一段时间后,有一天突然就发现打不开了,打开马上会弹出wine的错误,详细信息里面是什么PageFault 0x0000008之类的, ...

  3. php面向对象中的几个基本定义

    面向对象: 面向对象是现代编程中的一种重要设计方法,其基本思想是使用对象,类,封装,继承等来进行程序设计. 对象: 一只猪,一只羊,一辆汽车. 类: 类的主要作用就是创建对象. 封装: 类的特点是将对 ...

  4. python 根据现有文件树创建文件树

    # -*- coding: utf-8 -*- import os, errno def fileName(path):#获取文件夹 str = '' for i in range(1,len(pat ...

  5. 轻量级通信引擎StriveEngine —— C/S通信demo(2) —— 使用二进制协议 (附源码)

    在网络上,交互的双方基于TCP或UDP进行通信,通信协议的格式通常分为两类:文本消息.二进制消息. 文本协议相对简单,通常使用一个特殊的标记符作为一个消息的结束. 二进制协议,通常是由消息头(Head ...

  6. 《HiWind企业快速开发框架实战》(2)使用HiWind创建自己的项目

    <HiWind企业快速开发框架实战>(2)使用HiWind创建自己的项目 关于HiWind HiWind企业快速开发框架,是基于.NET+EasyUi(支持各种前端扩展,后面将扩展Boot ...

  7. Linux 查找已安装软件的方法

    1.rpm 注意rpm区分大小写 查询已安装的以mysql开头的包 rpm  -qa mysql* 查询已安装的mysql 包 rpm -qa|grep mysql rpm的方法有时候也所有已安装的包 ...

  8. 说说SQL Server 网络配置

    打开Sql Server Configuration Manager,里面显示了SQL Server的网络配置,这些到底表示什么含义呢? 图一:MSSQLSERVER的协议 这些配置选项,其实就是为了 ...

  9. 2016苹果春季发布会 iPhone SE发布

    配置如下 主屏尺寸:4英寸 主屏分辨率:1336x640像素 后置摄像头:1200万像素 前置摄像头:120万像素 电池容量:1624mAh 核心数:双核 操作系统:iOS 9 核心数:双核 CPU: ...

  10. Android开发-之环境的搭建

    关于Android开发可以使用的工具有eclipse和Android studio等,这两个工具都各有各的好处和不足.studio是谷歌推出的一款开发工具,而我们都知道Android就是谷歌公司的,所 ...