• js中鼠标滚轮事件详解


    (以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/

    之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用js对鼠标滚轮事件进行控制,滚轮事件其中考虑浏览器兼容性问题

    附加事件

    其中经我测试,IE/Opera属于同一类型,使用attachEvent即可添加滚轮事件。

     
    /*IE注册事件*/
    if(document.attachEvent){

         document.attachEvent('onmousewheel',scrollFunc);

    }

    Firefox使用addEventListener添加滚轮事件

    /*Firefox注册事件*/
    if(document.addEventListener){
        document.addEventListener('DOMMouseScroll',scrollFunc,false);
    }

    Safari与Chrome属于同一类型,可使用HTML DOM方式添加事件

    window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome

    其中除Firefox外其余均可使用HTML DOM方式添加事件,因此添加事件使用以下方式

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

    detail与wheelDelta

    判断滚轮向上或向下在浏览器中也要考虑兼容性,现在五大浏览器(IE、Opera、Safari、Firefox、Chrome)中Firefox 使用detail,其余四类使用wheelDelta;两者只在取值上不一致,代表含义一致,detail与wheelDelta只各取两个 值,detail只取±3,wheelDelta只取±120,其中正数表示为向上,负数表示向下。

     1 <p><label for="wheelDelta">  滚动值:</label>(IE/Opera)<input type="text" id="wheelDelta" /></p>
     2  <p><label for="detail"> 滚动值:(Firefox)</label><input type="text" id="detail" /></p>
     3  <script type="text/javascript">
     4  var oTxt=document.getElementById("txt");
     5 /***********************
     6 * 函数:判断滚轮滚动方向
     7 * 作者:walkingp
     8 * 参数:event
     9 * 返回:滚轮方向 1:向上 -1:向下
    10 *************************/
    11 var scrollFunc=function(e){
    12     var direct=0;
    13     e=|| window.event;
    14    
    15     var t1=document.getElementById("wheelDelta");
    16     var t2=document.getElementById("detail");
    17     if(e.wheelDelta){//IE/Opera/Chrome
    18         t1.value=e.wheelDelta;
    19     }else if(e.detail){//Firefox
    20         t2.value=e.detail;
    21     }
    22     ScrollText(direct);
    23 }
    24 /*注册事件*/
    25 if(document.addEventListener){
    26     document.addEventListener('DOMMouseScroll',scrollFunc,false);
    27 }//W3C
    28 window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome/Safari
    29 </script>

    另一篇文献参考

  • 相关阅读:
    hdu 2732 Leapin' Lizards 最大流 拆点 建图
    Atcoder CODE FESTIVAL 2017 qual C D
    Codeforces Round #442 Div.2 A B C D E
    hdu 3549 Flow Problem 最大流 Dinic
    2017-2018 ACM-ICPC, NEERC, Southern Subregional Contest I. Photo Processing
    Atcoder CODE FESTIVAL 2017 qual C C
    2017-2018 ACM-ICPC, NEERC, Southern Subregional Contest A E F G H I K M
    hdu 5952 Counting Cliques 求图中指定大小的团的个数 暴搜
    TensorFlow深度学习,一篇文章就够了
    Vim常用的基本操作
  • 原文地址:https://www.cnblogs.com/leo388/p/4461687.html
Copyright © 2020-2023  润新知