javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > js 事件对象 鼠标滚轮

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

作者:

第三篇,继续总结事件对象 先看看监听鼠标滚轮事件能帮我们做什么

[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
您可能感兴趣的文章:
阅读全文