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

更新时间：2010年05月31日 23:15:17 作者：

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Mouse Wheel Data</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style> .slider { width:50px; height:180px; background:#eee; padding:10px 0; cursor:n-resize; } .slider-slot { width:16px; margin:0 auto; height:180px; background:#eee; border:1px solid gray; border-color:#999 white white #999; position:relative; } .slider-trigger { width:14px; height:18px; font:1px/0 arial; border:1px solid gray; border-color:white #999 #999 white; background:#ccc; position:absolute; } .slider-trigger b { display:block; margin:1px 3px; border-top:1px solid #999; border-bottom:1px solid white; } </style> </head> <body> <h2>文本框增加/减少值</h2> <div><input type="text" id="txt" value="1440" /><span id="warn">文本框获得焦点后滚动鼠标滚轮</span></div> <h2>鼠标滚动缩放图片</h2> <div><img src="/upload/201005/20100531231516458.jpg" id="img" width="300" style="cursor:-moz-zoom-in" title="鼠标滚动 缩放大小" / alt="" /></div> <h2>鼠标滚动控制滑块移动</h2> <div class="slider" id="slider"> <div class="slider-slot"> <div class="slider-trigger" id="sliderTrigger"> <strong></strong> <strong></strong> <strong></strong> <strong></strong> <strong></strong> </div> </div> </div> </body> <script> var $ = function(i) { return document.getElementById( i ); } //取得滚动值 function getWheelValue( e ) { e = e||event; return ( e.wheelDelta ? e.wheelDelta/120 : -( e.detail%3 == 0 ? e.detail/3 : e.detail ) ) ; } function stopEvent(e) { e = e||event; if( e.preventDefault )e.preventDefault(); e.returnValue = false; } //绑定事件,这里对mousewheel做了判断,注册时统一使用mousewheel function addEvent( obj,type,fn ) { var isFirefox = typeof document.body.style.MozUserSelect != 'undefined'; if( obj.addEventListener ) obj.addEventListener( isFirefox ? 'DOMMouseScroll' : type,fn,false ); else obj.attachEvent( 'on'+type,fn ); return fn; } //移除事件,这里对mousewheel做了兼容,移除时统一使用mousewheel function delEvent( obj,type,fn ) { var isFirefox = typeof document.body.style.MozUserSelect != 'undefined'; if( obj.removeEventListener ) obj.removeEventListener( isFirefox ? 'DOMMouseScroll' : type,fn,false ); else obj.detachEvent( 'on'+type,fn ); } /*限制范围函数, 参数是三个数字,如果num 大于 max, 则返回max， 如果小于min，则返回min,如果在max和min之间，则返回num */ function range( num, max,min ) { return Math.min( max, Math.max( num,min ) ); } /* ------------ */ /* <h2>文本框增加/减少值</h2> */ $( 'txt' ).onfocus = function() { //保存txt自己的引用 var me = this, //onfocus之后注册滚轮事件 handler = addEvent( me,'mousewheel',function(e) { stopEvent( e ); var delta = getWheelValue(e); /* +me.value 将me.value转换成数字， 然后使用isNaN检查转换后的数字是否为NaN 如果是，重新赋值me.value=0; */ if( isNaN( +me.value ) ) me.value = 0; //递增（或递减） me.value = +me.value + delta; //选中me里的文字 me.select(); }); //失去焦点时，把mousewheel事件移除，重置window.onblur和handler引用为null this.onblur = function() { //移除掉mousewheel事件 delEvent( me,'mousewheel',handler ); window.onblur = handler = null; } //为了防止浏览器失焦后，文本框重复触发focus，在onblur时，让文本框同时失焦 window.onblur = function() { me.blur(); //把自己清理掉 this.onblur = null; } } /* <h2>鼠标滚动缩放图片</h2> */ addEvent( $('img'),'mousewheel',function(e) { stopEvent( e ); var delta = getWheelValue(e); //每次递增（或递减）10px，使用了范围限制，保证图片不会过大过小 var img = $('img'); //没有修复ie的this指向，所以这里只好重新获取img img.style.width = range( img.offsetWidth + ( delta * 10 ),550,100) + 'px'; return false; }); /* <h2>鼠标滚动控制滑块移动</h2> */ addEvent( $('slider'), 'mousewheel',function(e) { stopEvent( e ); var delta = getWheelValue(e), tar = $('sliderTrigger'); //杯具的反转，因为tar.offsetTop 越大，滑块就越往下，所以delta又需要反转回来，向上是负的，向下是正的，所以乘以-1 tar.style.top = range( tar.offsetTop + ( -1 * delta * 10 ),160,0 ) + 'px'; }); </script></html>

[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

您可能感兴趣的文章:

javascript原型链继承用法实例分析
这篇文章主要介绍了javascript原型链继承用法,实例分析了javascript原型链继承中的技巧与相关注意事项,非常具有实用价值,需要的朋友可以参考下
2015-01-01
JS显示日历和天气的方法
这篇文章主要介绍了JS显示日历和天气的方法,涉及JavaScript日期与时间的操作技巧,非常简单实用,需要的朋友可以参考下
2016-03-03
理解Javascript_13_执行模型详解
在《理解Javascript_12_执行模型浅析》一文中,我们初步的了解了执行上下文与作用域的概念，那么这一篇将深入分析执行上下文的构建过程，了解执行上下文、函数对象、作用域三者之间的关系。
2010-10-10
javascript解析json实例详解
这篇文章主要介绍了javascript解析json的方法,以实例形式详细讲述了javascript的json库用法,需要的朋友可以参考下
2014-11-11
DLL+ ActiveX控件+WEB页面调用例子
因项目需要，开始学习并研究VC、DLL及ActiveX控件，网上资料找了很多，但没一个可用的或者说没一个例子可理解并运行的。没办法，自己研究吧。功夫不负有心人，终有小成了，呵呵，现在把自己学习总结了一下，献给需要的人。
2010-08-08
小程序如何获取多个formId实现详解
这篇文章主要介绍了小程序如何获取多个formId实现详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-09-09
微信小程序云开发实现云数据库读写权限
这篇文章主要为大家详细介绍了微信小程序云开发实现云数据库读写权限，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-05-05
一道JS前端闭包面试题解析
这篇文章主要针对一道JS前端闭包面试题进行解析，从例题出发详细介绍JS前端闭包相关知识，感兴趣的小伙伴们可以参考一下
2015-12-12
Java File类的常用方法总结
这篇文章主要介绍了Java File类的常用方法总结,本文讲解了File类的常用方法,并对一些方法给出了代码示例,需要的朋友可以参考下
2015-03-03
JavaScript动态操作表格实例(添加,删除行,列及单元格)
这篇文章主要是对JavaScript动态操作表格实例(添加,删除行,列及单元格)进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2013-11-11