Maison > Article > interface Web > Javascript implémente la désactivation des compétences events_javascript de la molette de la souris

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

WBOYoriginal: 2016-05-16 15:49:191934parcourir

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;
 
  }

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>

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

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：méthode js pour trier les caractères chinois_compétences javascriptArticle suivant：méthode js pour trier les caractères chinois_compétences javascript

Articles Liés

Voir plus