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

<!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="http://files.glzy8.com/upload/201005/20100531231516458.jpg" _ewebeditor_ta_src="http%3A%2F%2Ffiles.glzy8.com%2Fupload%2F201005%2F20100531231516458.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> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%3E%20%0D%0Avar%20%24%20%3D%20function(i)%20%0D%0A%7B%20%0D%0Areturn%20document.getElementById(%20i%20)%3B%20%0D%0A%7D%20%0D%0A%2F%2F%E5%8F%96%E5%BE%97%E6%BB%9A%E5%8A%A8%E5%80%BC%20%0D%0Afunction%20getWheelValue(%20e%20)%20%0D%0A%7B%20%0D%0Ae%20%3D%20e%7C%7Cevent%3B%20%0D%0Areturn%20(%20e.wheelDelta%20%3F%20e.wheelDelta%2F120%20%3A%20-(%20e.detail%253%20%3D%3D%200%20%3F%20e.detail%2F3%20%3A%20e.detail%20)%20)%20%3B%20%0D%0A%7D%20%0D%0Afunction%20stopEvent(e)%20%0D%0A%7B%20%0D%0Ae%20%3D%20e%7C%7Cevent%3B%20%0D%0Aif(%20e.preventDefault%20)e.preventDefault()%3B%20%0D%0Ae.returnValue%20%3D%20false%3B%20%0D%0A%7D%20%0D%0A%2F%2F%E7%BB%91%E5%AE%9A%E4%BA%8B%E4%BB%B6%2C%E8%BF%99%E9%87%8C%E5%AF%B9mousewheel%E5%81%9A%E4%BA%86%E5%88%A4%E6%96%AD%2C%E6%B3%A8%E5%86%8C%E6%97%B6%E7%BB%9F%E4%B8%80%E4%BD%BF%E7%94%A8mousewheel%20%0D%0Afunction%20addEvent(%20obj%2Ctype%2Cfn%20)%20%0D%0A%7B%20%0D%0Avar%20isFirefox%20%3D%20typeof%20document.body.style.MozUserSelect%20!%3D%20'undefined'%3B%20%0D%0Aif(%20obj.addEventListener%20)%20%0D%0Aobj.addEventListener(%20isFirefox%20%3F%20'DOMMouseScroll'%20%3A%20type%2Cfn%2Cfalse%20)%3B%20%0D%0Aelse%20%0D%0Aobj.attachEvent(%20'on'%2Btype%2Cfn%20)%3B%20%0D%0Areturn%20fn%3B%20%0D%0A%7D%20%0D%0A%2F%2F%E7%A7%BB%E9%99%A4%E4%BA%8B%E4%BB%B6%2C%E8%BF%99%E9%87%8C%E5%AF%B9mousewheel%E5%81%9A%E4%BA%86%E5%85%BC%E5%AE%B9%2C%E7%A7%BB%E9%99%A4%E6%97%B6%E7%BB%9F%E4%B8%80%E4%BD%BF%E7%94%A8mousewheel%20%0D%0Afunction%20delEvent(%20obj%2Ctype%2Cfn%20)%20%0D%0A%7B%20%0D%0Avar%20isFirefox%20%3D%20typeof%20document.body.style.MozUserSelect%20!%3D%20'undefined'%3B%20%0D%0Aif(%20obj.removeEventListener%20)%20%0D%0Aobj.removeEventListener(%20isFirefox%20%3F%20'DOMMouseScroll'%20%3A%20type%2Cfn%2Cfalse%20)%3B%20%0D%0Aelse%20%0D%0Aobj.detachEvent(%20'on'%2Btype%2Cfn%20)%3B%20%0D%0A%7D%20%0D%0A%2F*%E9%99%90%E5%88%B6%E8%8C%83%E5%9B%B4%E5%87%BD%E6%95%B0%2C%20%0D%0A%E5%8F%82%E6%95%B0%E6%98%AF%E4%B8%89%E4%B8%AA%E6%95%B0%E5%AD%97%2C%E5%A6%82%E6%9E%9Cnum%20%E5%A4%A7%E4%BA%8E%20max%2C%20%E5%88%99%E8%BF%94%E5%9B%9Emax%EF%BC%8C%20%E5%A6%82%E6%9E%9C%E5%B0%8F%E4%BA%8Emin%EF%BC%8C%E5%88%99%E8%BF%94%E5%9B%9Emin%2C%E5%A6%82%E6%9E%9C%E5%9C%A8max%E5%92%8Cmin%E4%B9%8B%E9%97%B4%EF%BC%8C%E5%88%99%E8%BF%94%E5%9B%9Enum%20%0D%0A*%2F%20%0D%0Afunction%20range(%20num%2C%20max%2Cmin%20)%20%0D%0A%7B%20%0D%0Areturn%20Math.min(%20max%2C%20Math.max(%20num%2Cmin%20)%20)%3B%20%0D%0A%7D%20%0D%0A%2F*%20------------%20*%2F%20%0D%0A%2F*%20%3Ch2%3E%E6%96%87%E6%9C%AC%E6%A1%86%E5%A2%9E%E5%8A%A0%2F%E5%87%8F%E5%B0%91%E5%80%BC%3C%2Fh2%3E%20*%2F%20%0D%0A%24(%20'txt'%20).onfocus%20%3D%20function()%20%0D%0A%7B%20%0D%0A%2F%2F%E4%BF%9D%E5%AD%98txt%E8%87%AA%E5%B7%B1%E7%9A%84%E5%BC%95%E7%94%A8%20%0D%0Avar%20me%20%3D%20this%2C%20%0D%0A%2F%2Fonfocus%E4%B9%8B%E5%90%8E%E6%B3%A8%E5%86%8C%E6%BB%9A%E8%BD%AE%E4%BA%8B%E4%BB%B6%20%0D%0Ahandler%20%3D%20addEvent(%20me%2C'mousewheel'%2Cfunction(e)%20%0D%0A%7B%20%0D%0AstopEvent(%20e%20)%3B%20%0D%0Avar%20delta%20%3D%20getWheelValue(e)%3B%20%0D%0A%2F*%20%0D%0A%2Bme.value%20%E5%B0%86me.value%E8%BD%AC%E6%8D%A2%E6%88%90%E6%95%B0%E5%AD%97%EF%BC%8C%20%0D%0A%E7%84%B6%E5%90%8E%E4%BD%BF%E7%94%A8isNaN%E6%A3%80%E6%9F%A5%E8%BD%AC%E6%8D%A2%E5%90%8E%E7%9A%84%E6%95%B0%E5%AD%97%E6%98%AF%E5%90%A6%E4%B8%BANaN%20%0D%0A%E5%A6%82%E6%9E%9C%E6%98%AF%EF%BC%8C%E9%87%8D%E6%96%B0%E8%B5%8B%E5%80%BCme.value%3D0%3B%20%0D%0A*%2F%20%0D%0Aif(%20isNaN(%20%2Bme.value%20)%20)%20me.value%20%3D%200%3B%20%0D%0A%2F%2F%E9%80%92%E5%A2%9E%EF%BC%88%E6%88%96%E9%80%92%E5%87%8F%EF%BC%89%20%0D%0Ame.value%20%3D%20%2Bme.value%20%2B%20delta%3B%20%0D%0A%2F%2F%E9%80%89%E4%B8%ADme%E9%87%8C%E7%9A%84%E6%96%87%E5%AD%97%20%0D%0Ame.select()%3B%20%0D%0A%7D)%3B%20%0D%0A%2F%2F%E5%A4%B1%E5%8E%BB%E7%84%A6%E7%82%B9%E6%97%B6%EF%BC%8C%E6%8A%8Amousewheel%E4%BA%8B%E4%BB%B6%E7%A7%BB%E9%99%A4%EF%BC%8C%E9%87%8D%E7%BD%AEwindow.onblur%E5%92%8Chandler%E5%BC%95%E7%94%A8%E4%B8%BAnull%20%0D%0Athis.onblur%20%3D%20function()%20%0D%0A%7B%20%0D%0A%2F%2F%E7%A7%BB%E9%99%A4%E6%8E%89mousewheel%E4%BA%8B%E4%BB%B6%20%0D%0AdelEvent(%20me%2C'mousewheel'%2Chandler%20)%3B%20%0D%0Awindow.onblur%20%3D%20handler%20%3D%20null%3B%20%0D%0A%7D%20%0D%0A%2F%2F%E4%B8%BA%E4%BA%86%E9%98%B2%E6%AD%A2%E6%B5%8F%E8%A7%88%E5%99%A8%E5%A4%B1%E7%84%A6%E5%90%8E%EF%BC%8C%E6%96%87%E6%9C%AC%E6%A1%86%E9%87%8D%E5%A4%8D%E8%A7%A6%E5%8F%91focus%EF%BC%8C%E5%9C%A8onblur%E6%97%B6%EF%BC%8C%E8%AE%A9%E6%96%87%E6%9C%AC%E6%A1%86%E5%90%8C%E6%97%B6%E5%A4%B1%E7%84%A6%20%0D%0Awindow.onblur%20%3D%20function()%20%0D%0A%7B%20%0D%0Ame.blur()%3B%20%0D%0A%2F%2F%E6%8A%8A%E8%87%AA%E5%B7%B1%E6%B8%85%E7%90%86%E6%8E%89%20%0D%0Athis.onblur%20%3D%20null%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%2F*%20%3Ch2%3E%E9%BC%A0%E6%A0%87%E6%BB%9A%E5%8A%A8%E7%BC%A9%E6%94%BE%E5%9B%BE%E7%89%87%3C%2Fh2%3E%20*%2F%20%0D%0AaddEvent(%20%24('img')%2C'mousewheel'%2Cfunction(e)%20%0D%0A%7B%20%0D%0AstopEvent(%20e%20)%3B%20%0D%0Avar%20delta%20%3D%20getWheelValue(e)%3B%20%0D%0A%2F%2F%E6%AF%8F%E6%AC%A1%E9%80%92%E5%A2%9E%EF%BC%88%E6%88%96%E9%80%92%E5%87%8F%EF%BC%8910px%EF%BC%8C%E4%BD%BF%E7%94%A8%E4%BA%86%E8%8C%83%E5%9B%B4%E9%99%90%E5%88%B6%EF%BC%8C%E4%BF%9D%E8%AF%81%E5%9B%BE%E7%89%87%E4%B8%8D%E4%BC%9A%E8%BF%87%E5%A4%A7%E8%BF%87%E5%B0%8F%20%0D%0Avar%20img%20%3D%20%24('img')%3B%20%2F%2F%E6%B2%A1%E6%9C%89%E4%BF%AE%E5%A4%8Die%E7%9A%84this%E6%8C%87%E5%90%91%EF%BC%8C%E6%89%80%E4%BB%A5%E8%BF%99%E9%87%8C%E5%8F%AA%E5%A5%BD%E9%87%8D%E6%96%B0%E8%8E%B7%E5%8F%96img%20%0D%0Aimg.style.width%20%3D%20range(%20img.offsetWidth%20%2B%20(%20delta%20*%2010%20)%2C550%2C100)%20%2B%20'px'%3B%20%0D%0Areturn%20false%3B%20%0D%0A%7D)%3B%20%0D%0A%2F*%20%3Ch2%3E%E9%BC%A0%E6%A0%87%E6%BB%9A%E5%8A%A8%E6%8E%A7%E5%88%B6%E6%BB%91%E5%9D%97%E7%A7%BB%E5%8A%A8%3C%2Fh2%3E%20*%2F%20%0D%0AaddEvent(%20%24('slider')%2C%20'mousewheel'%2Cfunction(e)%20%0D%0A%7B%20%0D%0AstopEvent(%20e%20)%3B%20%0D%0Avar%20delta%20%3D%20getWheelValue(e)%2C%20%0D%0Atar%20%3D%20%24('sliderTrigger')%3B%20%0D%0A%2F%2F%E6%9D%AF%E5%85%B7%E7%9A%84%E5%8F%8D%E8%BD%AC%EF%BC%8C%E5%9B%A0%E4%B8%BAtar.offsetTop%20%E8%B6%8A%E5%A4%A7%EF%BC%8C%E6%BB%91%E5%9D%97%E5%B0%B1%E8%B6%8A%E5%BE%80%E4%B8%8B%EF%BC%8C%E6%89%80%E4%BB%A5delta%E5%8F%88%E9%9C%80%E8%A6%81%E5%8F%8D%E8%BD%AC%E5%9B%9E%E6%9D%A5%EF%BC%8C%E5%90%91%E4%B8%8A%E6%98%AF%E8%B4%9F%E7%9A%84%EF%BC%8C%E5%90%91%E4%B8%8B%E6%98%AF%E6%AD%A3%E7%9A%84%EF%BC%8C%E6%89%80%E4%BB%A5%E4%B9%98%E4%BB%A5-1%20%0D%0Atar.style.top%20%3D%20range(%20tar.offsetTop%20%2B%20(%20-1%20*%20delta%20*%2010%20)%2C160%2C0%20)%20%2B%20'px'%3B%20%0D%0A%7D)%3B%20%0D%0A%3C%2Fscript%3E"></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

教程首页更多教程

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

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