鼠标滚轮事件

2021-05-06 21:36:16 阅读：170 来源： 互联网

<!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta http-equiv="X-UA-Compatible" content="IE=edge">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Document</title>   <style>
    #box1{       width: 100px;       height: 100px;       background-color: red;       position: fixed;     }
    #box2{       width: 100px;       height: 100px;       background-color: yellow;       position: absolute;       left: 200px;       top: 200px;     }
       </style>
  <script>
    window.onload = function(){                  var box1 = document.getElementById("box1");
        /**          * onmousewheel 鼠标滚轮滚动的事件，会在滚轮滚动时触发          * 但是火狐不支持该属性          *          *  在火狐中需要使用 DOMMouseScroll 来绑定滚动事件          *  该事件需要通过 addEventListener() 函数来绑定         */            box1.onmousewheel = function (event){
          event = event || window.event;
          // 判断鼠标滚轮滚动的方向           //  event.wheelDelta 可以获取鼠标滚轮滚动的方向;                      // wheelDelta 不看大小只看正负向上是正值向下是负值           // wheelDelta 这个属性获取火狐中不支持           // 在火狐中使用 event.detail 来获取滚动的方向
          // 向上滚             // alert(event.wheelDelta);
          // 向上滚-3 下滚3           // alert(event.detail)
           /**                *  当鼠标滚轮向下滚动时 box1 边长                *  当滚轮向上滚动时， box1 变短               */

          // 判断鼠标滚轮滚动的方向           if(event.wheelDelta > 0 || event.detail < 0){             //  alert("向上滚")             // 向上滚 box1 变短             box1.style.height = box1.clientHeight - 10 + 'px';
          }else{             // alert("向下滚")             // 向下滚 box1 变长             box1.style.height = box1.clientHeight + 10 + 'px';           }

          /**            *  使用addEventListener() 方法绑定的响应函数取消默认行为时不能使用 return false            *  需要使用 event 来取消默认行为  event.preventDefault();            *  但是 ie8 不支持 event.preventDefault()           */           event.preventDefault && event.preventDefault();                      /**            *  当滚轮滚动时如果浏览器有滚动条滚动条会随之滚动            *  这是浏览器默认行为如果浏览器不希望发生则可以取消默认行为            */           return false;
        }
        // 为火狐绑定滚轮事件         bind(box1,"DOMMouseScroll",box1.onmousewheel)     }

    // 定义一个函数用来为指定元素绑定响应函数     /**      *  addEventListener() 中的this, 是绑定事件的对象      *  attachEvent() 中的this, 是window      *  需要统一两个方法 this      *  参数      *   obj 绑定事件的对象      *  eventStr 事件的字符串 (不要on)      *  callback 回调函数     */    function bind(obj,eventStr,callback){       if(obj.addEventListener){           // 大部分浏览器兼容的方式           obj.addEventListener(eventStr,callback,false);       }else{           // ie8 及以下           obj.attachEvent("on" + eventStr,function(){               // 在匿名函数中调用回调函数               // 改变 this 指向               callback.call(obj);           });       }   }
  </script> </head> <body style="height: 2000px;">      <div id="box1"> </div> </body> </html>

标签：滚轮,滚动,鼠标,绑定,事件,obj,box1,event
来源： https://www.cnblogs.com/eric-share/p/14736888.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

鼠标滚轮事件