滚轮事件的兼容性差异有些不拘一格,不是以往的IE8-派和其他派,而是FireFox派和其他派。

包括IE6在内的浏览器是使用onmousewheel,而FireFox浏览器一个人使用DOMMouseScroll. 经自己测试,即使现在FireFox 19下,也是不识onmousewheel

一个最简单的使用差异(body滚动条由内部一定高div撑开):

document.body.onmousewheel = function(event) {
event = event || window.event;
console.dir(event);
};
document.body.addEventListener("DOMMouseScroll", function(event) {
console.dir(event);
});

鼠标滚动事件与点击事件有很多类似的地方。比方说兼容部分:event.typeevent.screenX/event.screenYevent.clientX/event.clientYevent.altKeyevent.shiftKeyevent.cancelBubble都是一样的,不兼容的部分,IE6-8的event.srcElement与其他浏览器的event.target.

对于FireFox浏览器(Opera浏览器也有),判断鼠标滚动方向的属性为event.detail, 向下滚动值为3.

需要注意的是,FireFox浏览器的方向判断的数值的正负与其他浏览器是相反的。FireFox浏览器向下滚动是正值,而其他浏览器是负值。

兼容的滚轮事件方法

/**
* 简易的事件添加方法
*/ define(function(require, exports, module) {
exports.addEvent = (function(window, undefined) {
var _eventCompat = function(event) {
var type = event.type;
if (type == 'DOMMouseScroll' || type == 'mousewheel') {
event.delta = (event.wheelDelta) ? event.wheelDelta / 120 : -(event.detail || 0) / 3;
}
//alert(event.delta);
if (event.srcElement && !event.target) {
event.target = event.srcElement;
}
if (!event.preventDefault && event.returnValue !== undefined) {
event.preventDefault = function() {
event.returnValue = false;
};
}
/*
......其他一些兼容性处理 */
return event;
};
if (window.addEventListener) {
return function(el, type, fn, capture) {
if (type === "mousewheel" && document.mozFullScreen !== undefined) {
type = "DOMMouseScroll";
}
el.addEventListener(type, function(event) {
fn.call(this, _eventCompat(event));
}, capture || false);
}
} else if (window.attachEvent) {
return function(el, type, fn, capture) {
el.attachEvent("on" + type, function(event) {
event = event || window.event;
fn.call(el, _eventCompat(event));
});
}
}
return function() {};
})(window);
});

JS滚轮mousewheel事件和DOMMouseScroll事件的更多相关文章

  1. 学习 JS滚轮事件(mousewheel/DOMMouseScroll)

    学习 JS滚轮事件(mousewheel/DOMMouseScroll) 1-1 滚轮事件兼容性的差异   IE,chrome,safari 浏览器都使用 onmousewheel, 只有firefo ...

  2. 鼠标滚轮(mousewheel)和DOMMouseScroll事件

    IE6.0首先实现了mousewheel事件.此后,Opera.Chrome和Safari也都实现了这个事件.当用户通过鼠标滚轮与页面交互.在垂直方向上滚动页面时(无论向下还是向上),就会触发mous ...

  3. javascript事件之鼠标滚轮(mousewheel)和DOMMouseScroll事件

    javascript事件之鼠标滚轮(mousewheel)和DOMMouseScroll事件 发布时间:2015-02-07   编辑:www.jquerycn.cn 本文学习下,javascript ...

  4. JS滚轮事件onmousewheel

    典型的应用时鼠标滚轮滚动控制图片或者文字的大小,例如此类的转动鼠标滚轮实现缩放等等交互效果中,会用到 Mousewheel 事件.在大多数浏览器(IE6, IE7, IE8, Opera 10+, S ...

  5. 事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流

    一.事件冒泡定义 事件冒泡是指在一个对象触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那 ...

  6. 【JS】395-重温基础:事件

    本文是 重温基础 系列文章的第二十篇. 这是第三个基础系列的第一篇,欢迎持续关注呀!重温基础 系列的[初级]和[中级]的文章,已经统一整理到我的[Cute-JavaScript](http://js. ...

  7. ActiveX(二)Js 监听 ActiveX中的事件

    在上一篇随笔:ActiveX(一)第一个简单的Demo 中,已经可以实现 js 单向调用 ActiveX 中的方法,在很多情况下ActiveX中的方法的执行时相对耗时.耗性能的.在这样的情况下.Act ...

  8. JS事件对象与事件委托

    事件对象 包含事件相关的信息,如鼠标.时间.触发的DOM对象等 js默认将事件对象封装好,并自动的以参数的形式,传递给事件处理函数的第1个参数,如下: document.getElementsByTa ...

  9. js中的事件委托或是事件代理详解

    起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...

随机推荐

  1. Mysql按日期分组(group by)查询统计的时候,没有数据补0的解决办法

    转载自:http://blog.csdn.net/jie11447416/article/details/50887888 1.案例中的数据结构和数据如下 2.在没有解决的时候,是这样的   SELE ...

  2. Shell编程积累 zhuan

    在新的shell里执行程序 cd /home/lq/Server/anew-lstm_scriptmatlab -nodesktop -singleCompThred -r 'aStart' ,qui ...

  3. Matlab、R向量与矩阵操作 z

    已有 1849 次阅读 2012-8-2 15:15 |系统分类:科研笔记|关键词:矩阵 480 window border center Matlab.R向量与矩阵操作   描    述 Matla ...

  4. ID基本操作(创建主页,复制主页,把主页应用到多个页面)5.11

    主页上的对象将会显示在应用在这个主页上的所有页面. 一.创建主页的方法: 1.页面面板,右上方点击,可以新建主页..前缀:用来识别页面面板中的各个页面所应用的主页.最多可输入四个字符.名称:输入主页跨 ...

  5. 逆袭之旅DAY17.东软实训.Oracle.PLSQL.过程,函数,包,练习

    2018-07-13 14:54:46 --1.创建一个包,包含一个为雇员加薪的过程,一个为雇员减薪的过程 CREATE OR REPLACE PACKAGE pac_test1 IS PROCEDU ...

  6. SpringBoot 上传、下载(四)

    工程目录结构 完整代码: 1.pom.xml 首先当然是添加依赖,用到thymeleaf模板渲染html页面 <project xmlns="http://maven.apache.o ...

  7. set循环遍历删除特定元素

    使用Iterator迭代器 public class Demo { public static void main(String[] args) { Set<Object> obj = n ...

  8. SQL-23 对所有员工的当前(to_date='9999-01-01')薪水按照salary进行按照1-N的排名,相同salary并列且按照emp_no升序排列

    这题需要注意  题目描述 对所有员工的当前(to_date='9999-01-01')薪水按照salary进行按照1-N的排名,相同salary并列且按照emp_no升序排列CREATE TABLE ...

  9. ps基础学习笔记一

    图像?表示分为位图方式和矢量图方式 位图是像素点组成,一副图像所含像素越多,图像的效果就越好 矢量图是基于一定数学方式描述,适合表示色彩较少,一色块为主,曲线简单的图像,文件小ps一般用来处理位图,c ...

  10. python第一个程序HelloWorld

    在写第一个python程序之前,我们还需要了解的一个东西就是python解释器 解释器,顾名思义,就是解释一段代码的机器,程序运行的平台,例如Java的解释器就是jdk. 我们在写好的python代码 ...