解析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 相关文章推荐
JavaScript中的alert()函数使用技巧详解
Dec 29 Javascript
jquery Validation表单验证使用详解
Sep 12 Javascript
使用AngularJS实现表单向导的方法
Jun 19 Javascript
浅谈javascript原型链与继承
Jul 13 Javascript
vue修改vue项目运行端口号的方法
Aug 04 Javascript
Vue的Class与Style绑定的方法
Sep 01 Javascript
seajs模块压缩问题与解决方法实例分析
Oct 10 Javascript
vue路由守卫+登录态管理实例分析
May 21 Javascript
Vue + Elementui实现多标签页共存的方法
Jun 12 Javascript
微信小程序开发注意指南和优化实践(小结)
Jun 21 Javascript
vue路由缓存的几种实现方式小结
Feb 02 Javascript
vue绑定数字类型 value为数字的实例
Aug 31 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
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
浅谈php使用curl模拟多线程发送请求
2019/03/08 PHP
PHP生成zip压缩包的常用方法示例
2019/08/22 PHP
prototype Element学习笔记(篇二)
2008/10/26 Javascript
jQuery 全选效果实现代码
2009/03/23 Javascript
网络图片延迟加载实现代码 超越jquery控件
2010/03/27 Javascript
网站内容禁止复制和粘贴、另存为的js代码
2014/02/26 Javascript
Javascript removeChild()删除节点及删除子节点的方法
2015/12/27 Javascript
AngularJS基础 ng-switch 指令简单示例
2016/08/03 Javascript
Bootstrap超大屏幕的实现代码
2017/03/22 Javascript
react以create-react-app为基础创建项目
2018/03/14 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
2018/04/17 Javascript
js隐式转换的知识实例讲解
2018/09/28 Javascript
node实现生成带参数的小程序二维码并保存到本地功能示例
2018/12/05 Javascript
Vue-CLI 项目在pycharm中配置方法
2019/08/30 Javascript
微信小程序实现滚动加载更多的代码
2019/12/06 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
2020/02/04 jQuery
JS中锚点链接点击平滑滚动并自由调整到顶部位置
2021/02/06 Javascript
用python实现批量重命名文件的代码
2012/05/25 Python
用python + hadoop streaming 分布式编程(一) -- 原理介绍,样例程序与本地调试
2014/07/14 Python
python分析apache访问日志脚本分享
2015/02/26 Python
在Python程序员面试中被问的最多的10道题
2017/12/05 Python
Python实现字典的遍历与排序功能示例
2017/12/23 Python
1 行 Python 代码快速实现 FTP 服务器
2018/01/25 Python
Python 编码规范(Google Python Style Guide)
2018/05/05 Python
解决安装pycharm后不能执行python脚本的问题
2019/01/19 Python
webapp字号大小跟随系统字号大小缩放的示例代码
2018/12/26 HTML / CSS
台湾网友喜爱的综合型网路购物商城:Yahoo! 奇摩购物中心
2018/03/10 全球购物
测绘工程个人的自我评价
2013/11/10 职场文书
经理秘书找工作求职信
2013/12/19 职场文书
医学生职业生涯规划书范文
2014/03/13 职场文书
旅游文化节策划方案
2014/06/06 职场文书
幼儿园圣诞节活动总结
2015/05/06 职场文书
孙振耀退休感言
2015/08/01 职场文书
导游词之舟山普陀山
2019/11/06 职场文书
2019关于垃圾分类处理的调查报告
2019/12/26 职场文书