标签:als orange 12px false san use 判断 bsp detail
前 言
LiuDaP
最近无聊,在做自己的个人站,其中用到了一个关于鼠标滚轮方向判断的方法,今天闲来无聊,就给大家介绍一下吧!!!!
在介绍鼠标事件案例前,让我们先稍微了解一下js中的event对象
一、JS中的Event对象 |
Event对象:它代表的是事件的状态,例如可以表示鼠标的位置、鼠标按钮的状态、键盘按键的状态等等。
>>>事件通常与函数结合使用,函数不会在事件发生前被执行!
二、JS中如何判断鼠标滚轮方向 |
判断鼠标滚轮的方向,有着两个派别:一是谷歌、IE派别(这次IE没有搞特殊);二是火狐派别
>>>在谷歌、IE派别中,给我们提供了onmousewheel方法,该方法给我们提过了一个wheelDelta属性,该属性的返回值:正值与负值,其中正值表示滚轮向上滚动;负值表示滚轮向下滚动。
>>>而在火狐中,给我们提供了DOMMouseScroll方法,该方法给我们提供了一个detail属性,该属性的返回值:正值与负值,其中正值表示滚轮向下滚动;负值表示滚轮向上滚动。
>>>要注意的一点是:wheelDelta属性和detail属性的返回值都是正值与负值,但是两者表示滚轮的方向正好相反。。。
1 var scrollMouse=function(e){ 2 e=e || window.event; 3 if(e.wheelDelta){ //判断浏览器IE,谷歌滑轮事件 4 if(e.wheelDelta>0){ //当滑轮向上滚动时 5 alert("滑轮向上滚动"); 6 } 7 if(e.wheelDelta<0){ //当滑轮向下滚动时 8 alert("滑轮向下滚动"); 9 } 10 }else if(e.detail){ //Firefox滑轮事件 11 if(e.detail>0){ //当滑轮向下滚动时 12 alert("滑轮向下滚动"); 13 } 14 if(e.detail<0){ //当滑轮向上滚动时 15 alert("滑轮向上滚动"); 16 } 17 } 18 } 19 //给页面绑定滑轮滚动事件 20 if(document.addEventListener){//firefox 21 document.addEventListener("DOMMouseScroll", scrollFunc, false); 22 } 23 //滚动滑轮触发scrollFunc方法 //ie 谷歌 24 window.onmousewheel=scrollMouse;
这个周末由于事情太多了,就给大家分享到这里吧,希望这一点点小知识能给大家带来一点点的帮助。。
标签:als orange 12px false san use 判断 bsp detail
原文地址:http://www.cnblogs.com/interesting-me/p/7786844.html