解析javascript中鼠标滚轮事件


Posted in Javascript onMay 26, 2015

所有的现代浏览器都支持鼠标滚轮,并且在用户滚动滚轮时触发时间。浏览器通常使用鼠标滚轮滚动或缩放文档,但可以通过取消mousewheel事件来阻止这些默认操作。有一些互用性问题影响滚轮事件,但是编写跨平台的代码依旧可以行。除了Firefox之外的所有浏览器都支持“mousewheel”事件,但Firefox使用“DOMMouseScroll”,而3级DOM事件规范草案建议使用事件名“wheel”替代“mousewheel”。

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

Firefox不支持mousewheel

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

以下滚轮向下滚动是chrome和IE9下面控制台输出

解析javascript中鼠标滚轮事件

解析javascript中鼠标滚轮事件

以下是滚轮向下滚动Firefox下面控制台输出

解析javascript中鼠标滚轮事件解析javascript中鼠标滚轮事件

从上面输出得出,可以使用非标准的DOMMouseScroll事件取代mousewheel,使用事件对象的detail属性取代wheelDetal。但是,detail属性值的缩放比率和正负符号不同于wheelDetal,detail值乘以-40和wheelDetal值相等。

在除了FireFox之外的浏览器下,滚动的上下滚动与否是下面这个wheelDelta有关。

解析javascript中鼠标滚轮事件

根据测试,在我的win7系统下,无论IE7, IE10, Opera12,或者是safari5.1,每次往下滚动event.wheelDelta值都是-120.

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

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

var isFirefox = (navigator.userAgent.indexOf("Firefox") !== -1);
if(isFirefox){
  element.addEventListener("DOMMouseScroll",wheelHandler,false);
}
element.onmousewheel = wheelHandler;
//element.onwheel = wheelHandler; //DOM3级wheel事件,经过测试IE9还是不支持,但是谷歌和火狐都支持,在谷歌内有wheelDelta在火狐里面有detail
function wheelHandler(event){ event = event || window.event; var delta = event.wheelDelta || detail*-30; }

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
Json对象替换字符串占位符实现代码
Nov 17 Javascript
利用JavaScript实现新闻滚动效果(实例代码)
Nov 27 Javascript
Extjs4中的分页应用结合前后台
Dec 13 Javascript
Area 区域实现post提交数据的js写法
Apr 22 Javascript
js使用正则实现ReplaceAll全部替换的方法
Aug 22 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
Feb 28 Javascript
详解获取jq ul第一个li定位的四种解决方案
Nov 23 Javascript
AngularJS中$http的交互问题
Mar 29 Javascript
Vue组件之全局组件与局部组件的使用详解
Oct 09 Javascript
vue element中axios下载文件(后端Python)
May 10 Javascript
React传值 组件传值 之间的关系详解
Aug 26 Javascript
深入探索VueJS Scoped CSS 实现原理
Sep 23 Javascript
JS中字符串trim()使用示例
May 26 #Javascript
JSON字符串和对象之间的转换详解
May 26 #Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
May 25 #Javascript
Javascript实现飞动广告效果的方法
May 25 #Javascript
javascript自定义右键弹出菜单实现方法
May 25 #Javascript
JS+DIV实现鼠标划过切换层效果的方法
May 25 #Javascript
JavaScript实现仿网易通行证表单验证
May 25 #Javascript
You might like
Protoss魔法科技
2020/03/14 星际争霸
php缓冲输出实例分析
2015/01/05 PHP
js中escape对应的C#解码函数 UrlDecode
2012/12/16 Javascript
qq悬浮代码(兼容各个浏览器)
2014/01/29 Javascript
将中国标准时间转换成标准格式的代码
2014/03/20 Javascript
jquery实现的一个简单进度条效果实例
2014/05/12 Javascript
js delete 用法(删除对象属性及变量)
2014/08/24 Javascript
Javascript Object 对象学习笔记
2014/12/17 Javascript
使用node+vue.js实现SPA应用
2016/01/28 Javascript
jQuery动态添加
2016/04/07 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
2016/11/25 Javascript
基于cookie实现zTree树刷新后展开状态不变
2017/02/28 Javascript
通过一次报错详细谈谈Point事件
2018/05/17 Javascript
详解如何使用node.js的开发框架express创建一个web应用
2018/12/20 Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
2019/10/30 Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
2020/06/28 Javascript
[02:10]三分钟回顾完美世界城市挑战赛
2019/01/24 DOTA
解决python3爬虫无法显示中文的问题
2018/04/12 Python
python调用摄像头显示图像的实例
2018/08/03 Python
基于Python的身份证验证识别和数据处理详解
2020/11/14 Python
英国Boots旗下太阳镜网站:Boots Designer Sunglasses
2018/07/07 全球购物
捷克母婴用品购物网站:Feedo.cz
2020/12/28 全球购物
生物化学研究助理员求职信
2013/10/09 职场文书
好家长事迹材料
2014/01/23 职场文书
酒店营销策划方案
2014/02/07 职场文书
人力资源经理的岗位职责范本
2014/02/28 职场文书
《回乡偶书》教学反思
2014/04/12 职场文书
环保倡议书50字
2014/05/15 职场文书
法制宣传口号
2014/06/16 职场文书
2014年社区居委会主任重阳节讲话稿
2014/09/25 职场文书
中学生旷课检讨书2篇
2014/10/09 职场文书
电工实训报告总结
2014/11/05 职场文书
2014年大学班长工作总结
2014/11/14 职场文书
伏羲庙导游词
2015/02/09 职场文书
罚款通知怎么写
2015/04/22 职场文书
Python中的turtle画箭头,矩形,五角星
2022/03/16 Python