广

JavaScript

  • IOS开发
  • android开发
  • PHP编程
  • JavaScript
  • ASP.NET
  • ASP编程
  • JSP编程
  • Java编程
  • 易语言
  • Ruby编程
  • Perl编程
  • AJAX
  • 正则表达式
  • C语言
  • 编程开发

    JS判断鼠标向上滚动还是向下滚动

    2018-04-05 08:32:22 次阅读 稿源:互联网
    零七广告

    js如何判断滚轮的上下滚动,我们应该都见到过这种效果,用鼠标滚轮实现某个表单内的数字向上滚动就增加,向下滚动就减少的操作,这种效果是通过js对鼠标滚轮的事件监听来实现的。今天简单的研究了一下如何使用javascript来判断鼠标是向上滚动还是向下滚动,简要分享。

    首先,不得不说一下,因为不同的浏览器有不同的滚轮事件。主要是有两种,onmousewheel(firefox不支持)和DOMMouseScroll(只有firefox支持),关于这两个事件这里不做详述,想要了解的朋友请移步:鼠标滚轮(mousewheel)和DOMMouseScroll事件,所以在这个过程中需要添加事件监听,代码如下:兼容firefox采用addEventListener监听。

    1. /*注册事件*/ 
    2. if(document.addEventListener){ 
    3.     document.addEventListener('DOMMouseScroll',scrollFunc,false); 
    4. }//W3C 
    5. window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome 

    另外判断滚轮向上或向下滚动在浏览器中也要考虑兼容性,现在五大浏览器(IE、Opera、Safari、Firefox、Chrome)中Firefox 使用detail,其余四类使用wheelDelta;两者只在取值上不一致,代表含义却是一致的,detail只取±3,wheelDelta只取±120,其中正数表示为向上,负数表示向下。
     
    具体的示例代码如下所示:

    1. <label for="wheelDelta">滚动值:</label>(IE/Opera)<input type="text" id="wheelDelta"/> 
    2. <label for="detail">滚动值:(Firefox)</label><input type="text" id="detail"/> 
    3. <script type="text/javascript"> 
    4. var scrollFunc=function(e){ 
    5.     ee=e || window.event; 
    6.     var t1=document.getElementById("wheelDelta"); 
    7.     var t2=document.getElementById("detail"); 
    8.     if(e.wheelDelta){//IE/Opera/Chrome 
    9.         t1.value=e.wheelDelta; 
    10.     }else if(e.detail){//Firefox 
    11.         t2.value=e.detail; 
    12.     } 
    13. /*注册事件*/ 
    14. if(document.addEventListener){ 
    15.     document.addEventListener('DOMMouseScroll',scrollFunc,false); 
    16. }//W3C 
    17. window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome 
    18. </script> 

    通过运行上述代码我们可以得出以下结果:

    在非firefox浏览器中,滚轮向上滚动返回的数值是120,向下滚动返回-120
     
    而在firefox浏览器中,滚轮向上滚动返回的数值是-3,向下滚动返回3

     
    代码部分如下,e.wheelDelta是判断是否为非firefox浏览器,e.detail为firefox浏览器

    1. if(e.wheelDelta){//IE/Opera/Chrome 
    2.     t1.value=e.wheelDelta; 
    3. }else if(e.detail){//Firefox 
    4.     t2.value=e.detail; 

    零七网部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与零七网进行文章共享合作。

    零七广告
    零七广告
    零七广告
    零七广告