解析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 面向对象编程  function是方法(函数)
Sep 17 Javascript
js面向对象设计用{}好还是function(){}好(构造函数)
Oct 23 Javascript
Js 导出table内容到Excel的简单实例
Nov 19 Javascript
利用javascript打开模态对话框(示例代码)
Jan 11 Javascript
javascript轻量级模板引擎juicer使用指南
Jun 22 Javascript
一个简单的JavaScript Map实例(分享)
Aug 03 Javascript
原生javascript实现的ajax异步封装功能示例
Nov 03 Javascript
ionic2 tabs 图标自定义实例
Mar 08 Javascript
整理关于Bootstrap列表组的慕课笔记
Mar 29 Javascript
easyui combogrid实现本地模糊搜索过滤多列
May 13 Javascript
微信小程序开发animation心跳动画效果
Aug 16 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
Jan 25 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
也谈截取首页新闻 - 范例
2006/10/09 PHP
flash用php连接数据库的代码
2011/04/21 PHP
Yii 2中的load()和save()示例详解
2017/08/03 PHP
HTML TO JavaScript 转换
2006/06/26 Javascript
载入进度条 效果
2006/07/08 Javascript
使用jQuery.Validate进行客户端验证(初级篇) 不使用微软验证控件的理由
2010/06/28 Javascript
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
2011/01/09 Javascript
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
2013/04/08 Javascript
吐槽一下我所了解的Node.js
2014/10/08 Javascript
node.js中的fs.createReadStream方法使用说明
2014/12/17 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
2015/09/11 Javascript
JS实现设置ff与ie元素绝对位置的方法
2016/03/08 Javascript
使用JavaScript实现ajax的实例代码
2016/05/11 Javascript
基于Turn.js 实现翻书效果实例解析
2016/06/20 Javascript
Vue.js第四天学习笔记
2016/12/02 Javascript
jQuery插件imgAreaSelect基础讲解
2017/05/26 jQuery
Three.js实现简单3D房间布局
2018/12/30 Javascript
JS实现transform实现扇子效果
2020/01/17 Javascript
python实现从ftp服务器下载文件的方法
2015/04/30 Python
巧用python和libnmapd,提取Nmap扫描结果
2016/08/23 Python
基于Python3.6+splinter实现自动抢火车票
2018/09/25 Python
python3中property使用方法详解
2019/04/23 Python
Python必须了解的35个关键词
2020/07/16 Python
canvas绘制表情包的示例代码
2018/07/09 HTML / CSS
百思买加拿大:Best Buy Canada
2018/03/20 全球购物
Topshop美国官网:英国快速时尚品牌
2019/05/16 全球购物
屈臣氏马来西亚官网:Watsons马来西亚
2019/06/15 全球购物
乌克兰在线电子产品商店:MTA
2019/11/14 全球购物
为什么UNION ALL比UNION快
2016/03/17 面试题
大学同学聚会邀请函
2014/01/29 职场文书
《翻越远方的大山》教学反思
2014/04/13 职场文书
信息技术课后反思
2014/04/27 职场文书
委托书如何写
2014/08/30 职场文书
购房个人委托书范本
2014/10/11 职场文书
jQuery ajax - getScript() 方法和getJSON方法
2021/05/14 jQuery
详解CSS开发过程中的20个快速提升技巧
2021/05/21 HTML / CSS