js 事件对象 鼠标滚轮效果演示说明

所属分类: 网络编程 / JavaScript 阅读数: 1130
收藏 0 赞 0 分享

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

先来看看各个浏览器的兼容情况

IE 6,7,8
注册事件使用 onmousewheel
取得滚动的值使用 event.wheelDelta
滚动步长 120
向下是负值,向上是正值
当鼠标在一个同一个坐标,并且滚轮不间断滚动时,wheelDelta会按步长递增
(比如 -240 -360 )


Firefox 3.5
注册事件有两个MozMousePixelScroll,DOMMouseScroll,但是它们不能使用element.onDOMMouseScroll方式注册,必须使用addEventLinstener来监听事件
Firefox没有event.wheelDelta,它使用event.detail 来获取滚动的信息(Firefox这点做的很奇怪)
event.detail 本身是用来记录一个事件在原地(鼠标坐标不发生变化的情况下)执行了多少次的信息
而在DOMMouseScroll事件发生的时候,它的值通常是 3 和 -3
但是它的取值和IE正好相反, 向上是负,向下是正( 这个问题在代码中需要做统一 )
为什么说它的值通常是 3和-3呢,因为当你按住ctrl ,alt, shift 之后,再滑动鼠标滚轮,detail 的值就会成为 1和-1
而按住别的键,则正值有时还会变成6
总之在我看来是有点乱糟糟,


MozMousePixelScroll 据Mozilla说,是几乎跟DOMMouseScroll一样的事件,只不过更精确(到像素)
但是这个事件的detail值返回的非常奇怪,默认是51和-51,按住ctrl ,alt, shift 变成了 +- 17. @_@,所以它被华丽的无视了,我们不打算使用它


Chrome 和IE保持一致,但是它考虑到了横向鼠标滚轮设备的情况,所以增加了两个鼠标来分别获取值

事件 onmousewheel
wheelDelta {number}
wheelDeltaX {number}
wheelDeltaY {number}

这次 Opera 又是集大成者,既有detail 取值也一样是3,-3,又有wheelDelta,不过表现上倒是很一致
事件 onmousewheel
detail = {number}
wheelDelta = {number}



本来我们应该从Firefox支持的event.detail或者IE等支持的event.wheelDelta的取值中,选择一个,然后把另一个通过计算做成统一的,
但是实际上我们只能通过这些值知道 是向上滚 还是向下滚,
所以为了方便,我们两个都不取,通过计算把他们统一成 +1 和 -1.(这样做也是为了实际应用中的运算方便);

对于IE,Chrome来说,直接除以120就可以搞定

Opera 同时支持wheelDelta和detail ,但是detail没有wheelDelta同一位置递增的能力,所以
我们首先优先判断wheelDelta是否存在,如果存在,就使用wheelDelta,如果不存在再使用detail

由于firefox的键盘干扰,我们还需要对detail做一些过滤
首先用这个值跟3做取模运算 value % 3
说它是3的倍数,那么返回值是0,我们就用value除以3后返回( 保证返回的值是+1 -1 )
如果返回值不是0,那说明这个值不是1就是-1,那就直接返回这个值

最后,由于Firefox返回值的规则是向上是负 向下是正,与平时的习惯不同,我们要将正负反转过来,方法也很简单,计算结果前面加一个负号就可以搞定
话说回来,对滚轮事件的支持情况firefox真是有点闷.

好了,分析了一大堆,其实代码就几句:
复制代码 代码如下:

function getWheelValue( e )
{
e = e||event;
return ( e.wheelDelta ? e.wheelDelta/120 : -( e.detail%3 == 0 ? e.detail : e.detail/3 ) );
}

最后说说未来的滚轮事件和API
在DOM3 Event 中
滚轮事件变得更为复杂(也支持更多的东西)
注册的事件并没有变,依然叫mousewheel
专门增加了两枚滚轮事件对象
MouseWheelEvent
WheelEvents
而且支持了x,y,z三个轴向的滚轮值( 真复杂>_< )
感兴趣可以瞧瞧这里
http://www.w3.org/TR/DOM-Level-3-Events/#events-mousewheelevents
更多精彩内容其他人还在看

BootStrap数据表格实例代码

本文通过实例代码给大家分享了BootStrap数据表格的相关知识,感兴趣的朋友一起看看吧
收藏 0 赞 0 分享

基于vue的短信验证码倒计时demo

这篇文章主要介绍了基于vue的短信验证码倒计时demo,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

详解React Native开源时间日期选择器组件(react-native-datetime)

本篇文章主要介绍了详解React Native开源时间日期选择器组件(react-native-datetime),具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

JS库particles.js创建超炫背景粒子插件(附源码下载)

particles.js用于创建粒子的轻量级 JavaScript 库。使用方法非常简单,代码也很容易实现,下面通过本文给大家分享JS库particles.js创建超炫背景粒子插件附源码下载,需要的朋友参考下吧
收藏 0 赞 0 分享

JS库之Waypoints的用法详解

waypoints的功能非常强大,一款用于捕获各种滚动事件的插件,下面跟随脚本之家小编一起学习JS库之Waypoints的用法吧
收藏 0 赞 0 分享

强大的JavaScript响应式图表Chartist.js的使用

本篇文章主要介绍了强大的JavaScript响应式图表Chartist.js的使用,具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

详解wow.js中各种特效对应的类名

本篇文章主要介绍了wow.js中各种特效对应的类名 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库之Highlight.js的用法详解

highlight.js是一款轻量级的Web代码语法高亮库。下面通过实例代码给大家分享JS库之Highlight.js的用法详解,感兴趣的朋友跟随脚本之家小编一起学习吧
收藏 0 赞 0 分享

详解动画插件wow.js的使用方法

本篇文章主要介绍了动画插件wow.js的使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库 Highlightjs 添加代码行号的实现代码

Highlightjs是一款优秀的代码高亮Js组件,可以很方便地对各种语言编写的代码添加语法高亮样式。本文重点给大家介绍Highlightjs 添加代码行号的实现代码,需要的朋友参考下吧
收藏 0 赞 0 分享
查看更多