博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
鼠标滚动:mousewheel事件在Firefox采用DOMMouseScroll事件的统一处理
阅读量:5098 次
发布时间:2019-06-13

本文共 762 字,大约阅读时间需要 2 分钟。

这是一个小事件,但当下的WEB应用交互非常丰富,判断鼠标的滚动来执行相应的操作是比较常见的。我用Chrome/IE/Firefox/Opera 4种浏览器做测试,发现只有firefox的处理方法有很大的不同,下面细说一下这个情况:

第1、事件的名称不同

其它浏览器均采用mousewheel做为事件的名称,而Firefox采用DOMMouseScroll做为事件的名称,为了兼容,那我们就得绑定两次事件,如下:

1 document.addEventListener('mousewheel', handlerMouseWheel);2 document.addEventListener('DOMMouseScroll', handlerMouseWheel);

 

第2、判断滚轮的方向和值均不同

其它浏览器均是向上滚动为正值(+120)、向下滚动为负值(-120)。而Firefox则是向上滚动为负值(-5),向下滚动为正值(+5)

 

第3、包装event对象不同

Firefox对滚轮滚动的值保存在event对象中的detail属性里,而其它浏览器保存在event对象中的wheelDelta属性。

 

为了方便统一处理,我们还得编写一个函数,让firefox与其它浏览器的取值与方向相同,代码如下:

1 var getWheelDelta = function(event) {2     return event.wheelDelta || (-event.detail * 24);3 }

上面采用-event.detail来保持方向一致,放大24倍来保持值一致。(保持一次并非必需的,但有些情况下保持一致有利于处理)

转载于:https://www.cnblogs.com/langzs/p/6684282.html

你可能感兴趣的文章
MySQL更改默认的数据文档存储目录
查看>>
替代微软IIS强大的HTTP网站服务器工具
查看>>
6.5 案例21:将本地数据库中数据提交到服务器端
查看>>
PyQt5--EventSender
查看>>
android 通过AlarmManager实现守护进程
查看>>
Sql Server 中由数字转换为指定长度的字符串
查看>>
win7下把电脑设置成wlan热
查看>>
Java 多态 虚方法
查看>>
jquery.validate插件在booststarp中的运用
查看>>
java常用的包
查看>>
PHP批量覆盖文件并执行cmd命令脚本
查看>>
Unity之fragment shader中如何获得视口空间中的坐标
查看>>
支持向量机——内核
查看>>
MFC注册热键
查看>>
万能的SQLHelper帮助类
查看>>
如何在 Terminal 内可以“用惯用的编辑器”快速打开“目前正在做”的专案(project)呢?...
查看>>
uboot分析:uboot的启动过程分析
查看>>
tmux的简单快捷键
查看>>
springboot笔记04——读取配置文件+使用slf4j日志
查看>>
[Swift]LeetCode653. 两数之和 IV - 输入 BST | Two Sum IV - Input is a BST
查看>>