javascript某标签的鼠标滚动事件取消效果或实现其他自定义效果

最新推荐文章于 2024-02-22 11:48:22 发布

霸霸在举栗子

最新推荐文章于 2024-02-22 11:48:22 发布

阅读量589

点赞数

分类专栏：前端文章标签： js 鼠标滚动

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

我看了下边的原文后，在jsp的boby标签上加个id="bb"，然后在方法中加上

//给某标签的鼠标滚动事件取消效果或实现其他自定义效果

//其他自定义效果，在下边的原文里有例子

document.getElementById("bb").attachEvent("onmousewheel",function(){
return false;//这里必须返回false

});

以下是看的原文：

平时我们兼容什么东西总是在调整低版本IE的兼容性，但是这回不是因为低版本浏览器不给力。而是因为火狐给力过头了，完全不顾其它浏览器的感受标新立异了。除了火狐之外，所有的浏览器都可以使用MouseWheel事件来处理鼠标滚轮的响应。但是火狐却偏偏不支持MouseWheel，而使用无厘头的DOMMouseScroll，这玩意儿除了火狐以外其它浏览器都不兼容。也就是说，对于鼠标滚轮事件的处理，火狐只能使用DOMMouseScroll。而非火狐则只能使用MouseWheel。这两种事件实现的原理不同，他们处理的数据也不同。

 
         var 
          firefox = navigator.userAgent.indexOf( 
         'Firefox' 
         ) != -1; 
        
         firefox ? img.addEventListener( 
         'DOMMouseScroll' 
         , MouseWheel, 
         false 
         ) :  
        
         (img.onmousewheel = MouseWheel); 
        
         function 
         MouseWheel(e) { 
        
         e = e || window.event; 
        
         if 
         (e.stopPropagation) e.stopPropagation(); 
        
         else 
         e.cancelBubble =  
         true 
         ; 
        
         if 
         (e.preventDefault) e.preventDefault(); 
        
         else 
         e.returnValue =  
         false 
         ; 
        
         }

我们来看个完整的代码

 
         <!DOCTYPE html> 
        
         <style> 
        
         span {font:14px/20px 微软雅黑;} 
        
         #counter { 
        
         width:50px;height:20px; 
        
         border:1px solid 
         #CCC; 
        
         background: 
         #F9F9F9; 
        
         font:14px/20px Consolas; 
        
         text-align:center; 
        
         margin:10px; 
        
         } 
        
         </style> 
        
         <span>使用鼠标滚轮调整数值大小</span><br/> 
        
         <div id= 
         "counter" 
         >0</div> 
        
         <script> 
        
         //判断浏览器 
        
         var 
          isIE=navigator.userAgent.match(/MSIE (\d)/i); 
        
         isIE=isIE?isIE[1]:undefined; 
        
         var 
          isFF=/FireFox/i.test(navigator.userAgent); 
        
         //获取元素 
        
         var 
          counter=document.getElementById( 
         "counter" 
         ); 
        
         //鼠标滚轮事件 
        
         if 
         (isIE<9) 
         //传统浏览器使用MouseWheel事件 
        
         counter.attachEvent( 
         "onmousewheel" 
         , 
         function 
         (){ 
        
         //计算鼠标滚轮滚动的距离 
        
         //一格3行，每行40像素，所以除以120 
        
         var 
         v=event.wheelDelta/120; 
        
         counter.innerHTML=counter.innerHTML*1+v; 
        
         //阻止浏览器默认方法 
        
         return 
         false 
         ; 
        
         }); 
        
         else 
          if 
         (!isFF)  
         //除火狐外的现代浏览器也使用MouseWheel事件 
        
         counter.addEventListener( 
         "mousewheel" 
         , 
         function 
         (e){ 
        
         //计算鼠标滚轮滚动的距离 
        
         var 
         v=e.wheelDelta/120; 
        
         counter.innerHTML=counter.innerHTML*1+v; 
        
         //阻止浏览器默认方法 
        
         e.preventDefault(); 
        
         }, 
         false 
         ); 
        
         else 
          //奇葩的火狐使用DOMMouseScroll事件 
        
         counter.addEventListener( 
         "DOMMouseScroll" 
         , 
         function 
         (e){ 
        
         //计算鼠标滚轮滚动的距离 
        
         //一格是3行，但是要注意，这里和像素不同的是它是负值 
        
         var 
         v=-e.detail/3; 
        
         counter.innerHTML=counter.innerHTML*1+v; 
        
         //阻止浏览器默认方法 
        
         e.preventDefault(); 
        
         }, 
         false 
         ); 
        
         </script>

以上所述就是本文的全部内容了，希望大家能够喜欢。

霸霸在举栗子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript某标签的鼠标滚动事件取消效果或实现其他自定义效果

我看了下边的原文后，在jsp的boby标签上加个id="bb"，然后在方法中加上//给某标签的鼠标滚动事件取消效果或实现其他自定义效果//其他自定义效果，在下边的原文里有例子document.getElementById("bb").attachEvent("onmousewheel",function(){ return false;//这里必须返回false
复制链接

扫一扫