javascript鼠标中键滚动事件介绍:
在实际应用中,鼠标的一些事件非常常用,例如,onclick事件、onmouseover事件等,这里就不介绍了,具体可以参阅javascript的onclick事件和javascript的onmouseover事件一章节。 还有一种事件比较少用,那就是鼠标中键滚轮滚动事件,下面就通过代码实例简单介绍一下中键滚轮事件。
IE浏览器和谷歌浏览器支持mousewheel事件,也就是鼠标中键滚动事件,但是遗憾的是火狐浏览器并不支持此事件,而是支持DOMMouseScroll事件,下面就这两个做一下简单的分析对别:
一.mousewheel事件:
event.wheelDelta返回值是120的倍数,如果属性值为正数则是向上滚动,如果是负数则是向下滚动。
滚动幅度的大小等于event.wheelDelta/120。
二.DOMMouseScroll事件:
event.detail返回值都是3的倍数,和event.wheelDelta相反,如果属性值为负数,则是向上滚动,如果是正数则是向下滚动。
特别注意:
DOMMouseScroll不支持前面加"on"事件注册方式,例如obj.onclick=funcion(){}。
下面对上面做一下兼容性处理,以达到在任何浏览器中都可以顺利运行。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css"> #thediv{ width:100px; height:100px; background-color:red } </style> <script type="text/javascript"> var addEvent=(function(){ var _eventCompat=function(event){ var type=event.type; if(type==‘DOMMouseScroll‘||type==‘mousewheel‘){ event.delta=(event.wheelDelta)?event.wheelDelta/120:-(event.detail||0)/3; } if(event.srcElement&&!event.target){ event.target=event.srcElement; } if(!event.preventDefault&&event.returnValue!==undefined){ event.preventDefault=function(){ event.returnValue=false; }; } return event; }; if(window.addEventListener){ return function(el, type, fn, capture){ if(type==="mousewheel"&&document.mozHidden!==undefined){ type="DOMMouseScroll"; } el.addEventListener(type,function(event){ fn.call(this, _eventCompat(event)); },capture||false); } } else if(window.attachEvent){ return function(el, type, fn, capture){ el.attachEvent("on" + type, function(event){ event = event || window.event; fn.call(el, _eventCompat(event)); }); } } return function(){}; })(); window.onload=function(){ var height=100; var width=100; var thediv=document.getElementById("thediv"); function size(event){ width=width+event.delta; height=height+event.delta; thediv.style.width=width+"px"; thediv.style.height=height+"px"; } addEvent(thediv,"mousewheel",size,false); } </script> </head> <body> <div id="thediv"></div> </body> </html>
以上代码,当鼠标放在div中时候,滚动鼠标中键能够缩放div的大小,下面介绍一下实现过程:
一.实现原理:
代码看上去稍显复杂,其实特别的简单,就是根据在不同浏览器中,相关事件的特点,进行了一些兼容性处理,这是必然的操作,这里就不多介绍了,大家直接看代码注释可以了解相关细节。
二.代码注释:
1.var addEvent=(function(){})(),声明一个变量,它的值就是匿名函数的返回值,这个返回值就是一个函数对象。
2.var _eventCompat=function(event){})(),声明一个变量,它的值是一个匿名函数,此匿名函数能够封装一个事件对象,对时间对象的属性做一些兼容性处理,此函数的参数就是事件对象。
3.var type=event.type,将事件类型类型赋值给变量type。
4.if(type==‘DOMMouseScroll‘||type==‘mousewheel‘),如果事件类型是‘DOMMouseScroll‘或者‘mousewheel‘。
5.event.delta=(event.wheelDelta)?event.wheelDelta/120:-(event.detail||0)/3,delta是一个事件对象的自定义属性,如果支持event.wheelDelta属性(谷歌和IE浏览器)则使用event.wheelDelta/120,这会得到滚动的幅度,event.wheelDelta的返回值都是120的倍数,如果在火狐浏览器下,则使用(event.detail||0)/3,event.detail的返回值是3的倍数。
6.if(event.srcElement&&!event.target) ,如果事件对象支持srcElement属性且不支持target属性,这说明是IE8和IE8以下浏览器。
7.event.target=event.srcElement,将target属性值修改为event.srcElement。
8.if(window.addEventListener) ,如果支持addEventListener函数,也就是谷歌、火狐或者IE8以上浏览器。
9.return function(el, type, fn, capture){},返回一个函数对象,此函数具有四个参数,第一个参数是要注册事件处理函数的对象,第二个是事件类型,第三个是事件处理函数,第四个是一个布尔值,用来说明是捕获类型还是冒泡类型。
10.if(type==="mousewheel"&&document.mozHidden!==undefined){type="DOMMouseScroll"} 如果是火狐浏览器,则将type值设置为DOMMouseScroll。document.mozHidden在火狐浏览器中是个布尔值,在谷歌和IE浏览器中返回值是undefined。
11.el.addEventListener(type,function(ev){},capture||false)注册事件处理函数。
12.fn.call(this, _eventCompat(ev));,将函数fn的调用对象设置为el,参数为一个封装好的事件对象,参数ev是原始的事件对象。
相关阅读:
1.srcElement属性可以参阅javascript的event.srcElement事件属性一章节。
2.target属性可以参阅javascript的event.target事件属性一章节。
3.preventDefault()函数可以参阅javascript的preventDefault()方法一章节。
4.addEventListener()函数可以参阅addEventListener()和attachEvent()函数的用法一章节。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=10488
更多内容可以参阅:http://www.softwhy.com/javascript/