码迷,mamicode.com
首页 > Web开发 > 详细

js中判断鼠标滚轮方向的方法

时间:2017-11-05 11:31:13      阅读:250      评论:0      收藏:0      [点我收藏+]

标签: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;    

 

编者按

  这个周末由于事情太多了,就给大家分享到这里吧,希望这一点点小知识能给大家带来一点点的帮助。。

js中判断鼠标滚轮方向的方法

标签:als   orange   12px   false   san   use   判断   bsp   detail   

原文地址:http://www.cnblogs.com/interesting-me/p/7786844.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!