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

 更新时间:2010年05月31日 23:15:17   作者:  
第三篇,继续总结事件对象 先看看监听鼠标滚轮事件能帮我们做什么

[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

相关文章

  • JS中不为人知的五种声明Number的方式简要概述

    JS中不为人知的五种声明Number的方式简要概述

    声明一个数值类型的变量我看到三种;我嘴角微微一笑:少年你还嫩了点,哪止三种,我知道的至少有五种,好奇的你可以参考下哈,希望本文可以帮助到你
    2013-02-02
  • JS实现点击下载的小例子

    JS实现点击下载的小例子

    这篇文章介绍了JS实现点击下载的小例子,有需要的朋友可以参考一下
    2013-07-07
  • js实现炫酷光感效果

    js实现炫酷光感效果

    这篇文章主要为大家详细介绍了js实现炫酷光感效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • js 数据存储和DOM编程

    js 数据存储和DOM编程

    本文主要介绍了js数据存储和DOM编程的相关知识。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • 常见JS验证脚本汇总

    常见JS验证脚本汇总

    这篇文章主要介绍了常见JS验证脚本,结合实例形式汇总分析了JavaScript用于验证的系统自带函数与自定义函数,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-12-12
  • javascript 获取函数形参个数

    javascript 获取函数形参个数

    本节主要介绍了javascript获取函数形参个数的具体实现,需要的朋友可以参考下
    2014-07-07
  • javascript动画之磁性吸附效果篇

    javascript动画之磁性吸附效果篇

    在实际应用中,常常需要为拖拽的元素限定范围。而通过限定范围,再增加一些辅助的措施,就可以实现磁性吸附的效果。本文将详细介绍javascript的磁性吸附,有需要的朋友可以参考借鉴。
    2016-12-12
  • (跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享

    (跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享

    一些js代码,自己备用的,高手不要笑话我。(跨浏览器基础事件,浏览器检测,判断浏览器的名称、版本号、操作系统)等等,很实用的,方便自己使用,感兴趣的朋友可以了解下,希望本文对你有所帮助
    2013-01-01
  • JS实现的JSON数组去重算法示例

    JS实现的JSON数组去重算法示例

    这篇文章主要介绍了JS实现的JSON数组去重算法,结合实例形式分析了javascript针对json数组的遍历、判断实现去重复功能相关操作技巧,需要的朋友可以参考下
    2018-04-04
  • JavaScript实现url地址自动检测并添加URL链接示例代码

    JavaScript实现url地址自动检测并添加URL链接示例代码

    写一个简单的聊天系统,发出Htpp的Url实现跳转加上a标签,下面是具体的实现,感兴趣的朋友不要错过
    2013-11-11

最新评论