鼠标滚动:mousewheel事件在Firefox采用DOMMouseScroll事件的统一处理
这是一个小事件,但当下的WEB应用交互非常丰富,判断鼠标的滚动来执行相应的操作是比较常见的。我用Chrome/IE/Firefox/Opera 4种浏览器做测试,发现只有firefox的处理方法有很大的不同,下面细说一下这个情况:
第1、事件的名称不同
其它浏览器均采用mousewheel做为事件的名称,而Firefox采用DOMMouseScroll做为事件的名称,为了兼容,那我们就得绑定两次事件,如下:
document.addEventListener('mousewheel', handlerMouseWheel);
document.addEventListener('DOMMouseScroll', handlerMouseWheel);
第2、判断滚轮的方向和值均不同
其它浏览器均是向上滚动为正值(+120)、向下滚动为负值(-120)。而Firefox则是向上滚动为负值(-5),向下滚动为正值(+5)。
第3、包装event对象不同
Firefox对滚轮滚动的值保存在event对象中的detail属性里,而其它浏览器保存在event对象中的wheelDelta属性。
为了方便统一处理,我们还得编写一个函数,让firefox与其它浏览器的取值与方向相同,代码如下:
var getWheelDelta = function(event) {
return event.wheelDelta || (-event.detail * 24);
}
上面采用-event.detail来保持方向一致,放大24倍来保持值一致。(保持一次并非必需的,但有些情况下保持一致有利于处理)
鼠标滚动:mousewheel事件在Firefox采用DOMMouseScroll事件的统一处理的更多相关文章
- JavaScript一个鼠标滚动事件的实例
<script type="text/javascript" src="./whenReady.js"></script> <!- ...
- javascript 事件委托,jq,js模拟事件
<!DOCTYPE> <html> <head> <title></title> <script src="Scripts/ ...
- 鼠标滚轮(mousewheel)和DOMMouseScroll事件
IE6.0首先实现了mousewheel事件.此后,Opera.Chrome和Safari也都实现了这个事件.当用户通过鼠标滚轮与页面交互.在垂直方向上滚动页面时(无论向下还是向上),就会触发mous ...
- javascript事件之鼠标滚轮(mousewheel)和DOMMouseScroll事件
javascript事件之鼠标滚轮(mousewheel)和DOMMouseScroll事件 发布时间:2015-02-07 编辑:www.jquerycn.cn 本文学习下,javascript ...
- 在FireFox浏览器上,用stopImmediatePropagation阻止冒泡鼠标滚动事件
楔子 是不是在火狐用stopPropagation不太满意 很久没有笑过又不知为何 既然不快乐又不喜欢这里 不如一路向西用stopImmediatePropagation(其实我对浏览器的兼容性看不顺 ...
- 鼠标滚动事件 - onmousewheel
1.Jquery-MouseWheel jquery默认是不支持支持鼠标滚轮事件(mousewheel) jquery MouseWheel下载:https://github.com/jquery/j ...
- JS滚轮mousewheel事件和DOMMouseScroll事件
滚轮事件的兼容性差异有些不拘一格,不是以往的IE8-派和其他派,而是FireFox派和其他派. 包括IE6在内的浏览器是使用onmousewheel,而FireFox浏览器一个人使用DOMMouseS ...
- JS鼠标滚动事件
-----------------------------//鼠标滚动事件以下是JS临听鼠标滚动事件 并且还考虑到了各浏览器的兼容----------------------------------- ...
- vue组件添加鼠标滚动事件
在一个组件标签上加鼠标滚动事件,应该写成 @mousewheel.native
随机推荐
- Linux下自动备份MySQL
使用expect和mysqldump备份 expect expect是一个免费的编程工具语言,用来实现自动和交互式任务进行通信,而无需人的干预. 例如,执行shell脚本的过程中,需要输入用户名.密码 ...
- 一个简单的php站点配置
一个简单的php站点配置 现在我们来看在一个典型的,简单的PHP站点中,nginx怎样为一个请求选择location来处理: server { listen 80; ...
- 用CSS3 做的星体
制作原理:在我的上一篇随笔中有详细的说明,由于这个方法制作的球,比较耗性能,就只做了3个小球,效果大家可以试验. <!DOCTYPE html><html><head l ...
- ios的300ms点击延时问题
一.什么是ios的300ms点击延时问题 ios的移动端页面对点击事件有300ms延时. 二.为什么存在这个问题 这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— ...
- jQuery的基本操作
jQuery就是一个js的库· 主要分为两部分: 1·寻找元素 (选择器,筛选器) 2·操作元素 (CSS的操作,属性的操 ...
- solr笔记之solr下载及安装
在学习solr过程中,磕磕碰碰,遇到过许多问题,所以特写下笔记,以供需要的时候时常翻阅,也给能看到该博文的博友提供一个不全面的参考. 一.solr简介: Solr是一个独立的企业及搜索应用服务器,它对 ...
- Java面试08|Java重要的类和相关的方法
1.深入理解Class类及其中的方法 获取Class类的方法: 1.调用Object类的getClass()方法来得到Class对象,这也是最常见的产生Class对象的方法.2.使用Class类的中静 ...
- 学习H5一周随笔
H5学习也已经进行了一个周了,除了学习过程中的乱哄哄的脑子,对H5初学者(我)常见的问题有了如下见解. 1.初学者在建立新的Html文件之后,有时候会把 <meta charset=" ...
- 解决AJAX在火狐,谷歌都能正常运行,而IE不行的问题
如图所示: 经过一系列测试,并不是data参数的问题,也不是if...else...判断的问题,居然是console.log()将函数阻拦住了,百度了下说低版本的IE不支持console.log(), ...
- 3390: [Usaco2004 Dec]Bad Cowtractors牛的报复
3390: [Usaco2004 Dec]Bad Cowtractors牛的报复 Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 69 Solved: ...