解析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 相关文章推荐
js 处理URL实用技巧
Nov 23 Javascript
一个简单的弹性返回顶部JS代码实现介绍
Jun 09 Javascript
node.js中的buffer.copy方法使用说明
Dec 14 Javascript
jQuery中:empty选择器用法实例
Dec 30 Javascript
javascript下拉框选项单击事件的例子分享
Mar 04 Javascript
JS作为值的函数用法示例
Jun 20 Javascript
javascript滚轮控制模拟滚动条
Oct 19 Javascript
探索Vue.js component内容实现
Nov 03 Javascript
javascript实现右下角广告框效果
Feb 01 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
Feb 13 Javascript
详解Vue用cmd创建项目
Feb 12 Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
Jun 24 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 远程关机操作的代码
2008/12/05 PHP
深入浅析php中sprintf与printf函数的用法及区别
2016/01/08 PHP
PHP针对多用户实现更换头像功能
2016/09/04 PHP
PHP判断用户是否已经登录(跳转到不同页面或者执行不同动作)
2016/09/22 PHP
图片上传插件jquery.uploadify详解
2013/11/15 Javascript
iframe里的页面禁止右键事件的方法
2014/06/10 Javascript
jQuery层级选择器用法分析
2015/02/10 Javascript
jQuery简单几行代码实现tab切换
2015/03/10 Javascript
jquery实现仿JqueryUi可拖动的DIV实例
2015/07/31 Javascript
jquery实现可关闭的倒计时广告特效代码
2015/09/02 Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
2016/01/20 Javascript
让你一句话理解闭包(简单易懂)
2016/06/03 Javascript
微信小程序 教程之注册程序
2016/10/17 Javascript
nodejs中全局变量的实例解析
2017/03/07 NodeJs
vue-cli系列之vue-cli-service整体架构浅析
2019/01/14 Javascript
wxPython使用系统剪切板的方法
2015/06/16 Python
python查看微信好友是否删除自己
2016/12/19 Python
浅谈python jieba分词模块的基本用法
2017/11/09 Python
Django中Forms的使用代码解析
2018/02/10 Python
Python基于生成器迭代实现的八皇后问题示例
2018/05/23 Python
Numpy array数据的增、删、改、查实例
2018/06/04 Python
使用Django简单编写一个XSS平台的方法步骤
2019/03/25 Python
Python实现的银行系统模拟程序完整案例
2019/04/12 Python
Python 解析pymysql模块操作数据库的方法
2020/02/18 Python
Django跨域资源共享问题(推荐)
2020/03/09 Python
Python之字典对象的几种创建方法
2020/09/30 Python
如何用Django处理gzip数据流
2021/01/29 Python
希腊香水和化妆品购物网站:Parfimo.gr
2019/10/03 全球购物
电大毕业生自我鉴定
2013/11/10 职场文书
计算机专业毕业生自荐信范文
2014/03/06 职场文书
2014党委书记四风问题对照检查材料思想汇报
2014/09/22 职场文书
教师学习八项规定六项禁令思想汇报
2014/09/27 职场文书
鲁迅故居导游词
2015/02/05 职场文书
2016元旦主持人经典开场白台词
2015/12/03 职场文书
PyMongo 查询数据的实现
2021/06/28 Python
Python时间操作之pytz模块使用详解
2022/06/14 Python