suchen

Heim >Web-Frontend >js-Tutorial >Javascript implementiert die Deaktivierung von Mausrad-Events_Javascript-Fähigkeiten

Javascript implementiert die Deaktivierung von Mausrad-Events_Javascript-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:49:192013Durchsuche

Normalerweise passen wir die Kompatibilität niedrigerer IE-Versionen an, wenn es um kompatible Dinge geht, aber dieses Mal liegt es nicht daran, dass die niedrigere Version des Browsers inkompetent ist. Das liegt daran, dass Firefox zu weit gegangen ist und die Erfahrungen anderer Browser völlig außer Acht gelassen hat. Alle Browser außer Firefox können das MouseWheel-Ereignis verwenden, um die Reaktion des Mausrads zu verarbeiten. Allerdings unterstützt Firefox MouseWheel nicht und verwendet das unsinnige DOMMouseScroll, das mit anderen Browsern außer Firefox nicht kompatibel ist. Mit anderen Worten: Für die Verarbeitung von Mausradereignissen kann Firefox nur DOMMouseScroll verwenden. Nicht-Firefox kann nur MouseWheel verwenden. Die Prinzipien dieser beiden Ereignisse sind unterschiedlich und auch die von ihnen verarbeiteten Daten sind unterschiedlich. 

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

Sehen wir uns den vollständigen Code an

<!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>

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：js-Methode zum Sortieren chinesischer Zeichen_Javascript-KenntnisseNächster Artikel：js-Methode zum Sortieren chinesischer Zeichen_Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen