Javascript implémente la désactivation des compétences events_javascript de la molette de la souris-js tutoriel-php.cn

Javascript implémente la désactivation des compétences events_javascript de la molette de la souris

WBOY

Libérer： 2016-05-16 15:49:19

original

1964 Les gens l'ont consulté

Nous ajustons généralement la compatibilité des versions inférieures d'IE lorsqu'il s'agit d'éléments compatibles, mais cette fois, ce n'est pas parce que la version inférieure du navigateur est incompétente. C'est parce que Firefox est allé trop loin et ignore complètement l'expérience des autres navigateurs. Tous les navigateurs, à l'exception de Firefox, peuvent utiliser l'événement MouseWheel pour gérer la réponse de la molette de la souris. Cependant, Firefox ne prend pas en charge MouseWheel et utilise le absurde DOMMouseScroll, qui n'est pas compatible avec d'autres navigateurs à l'exception de Firefox. En d’autres termes, pour gérer les événements de la molette de la souris, Firefox ne peut utiliser que DOMMouseScroll. Les non-Firefox ne peuvent utiliser que MouseWheel. Les principes de ces deux événements sont différents, et les données qu’ils traitent sont également différentes.

var firefox = navigator.userAgent.indexOf('Firefox') != -1;
firefox &#63; 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;
 
  }

Copier après la connexion

Jetons un coup d'oeil au code complet

<!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&#63;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>

Copier après la connexion

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.