相容所有瀏覽器的js滑鼠中鍵滾動事件

admin發表於2017-03-19
瀏覽器JS事件

普通的滑鼠按鍵不多，左右鍵和中鍵可以滾動的鍵，對於左右兩鍵事件可能更為熟悉一些，中鍵滾動事件則相對較為陌生，並且存在著很大的瀏覽器相容性問題，下面就通過程式碼例項介紹一下相容所有主流瀏覽器的中鍵滾動事件，希望能夠給需要的朋友帶來幫助。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<script type="text/javascript"> 
var width=350;
var height=250;
var wheel=function(event){  
  var delta=0;  
  if(!event){
    event=window.event;
  }
  if(event.wheelDelta){
    delta=event.wheelDelta/120;  
  } 
  else if(event.detail){  
    delta=-event.detail/3;  
  }  
  if(delta){handle(delta);} 
  if(event.preventDefault){event.preventDefault();}  
  event.returnValue = false;  
}  
 
if(window.addEventListener){  
  window.addEventListener('DOMMouseScroll',wheel,false);  
}  
window.onmousewheel=document.onmousewheel=wheel;  
 
var handle=function(delta){  
  var theimage=document.getElementById("theimage");  
  width=width+delta*10;
  height=height+delta*10;
  theimage.style.width=width+"px";
  theimage.style.height=height+"px";
}  
</script>
</head>
<body>
<div><img src="mytest/js/small.jpg" id="theimage"></div>
</body>
</html>

以上程式碼是一個典型的滾動滑鼠中鍵的演示效果，可以實現相容所有主流瀏覽器縮放功能，具體中鍵事件這裡就不介紹了，可以參閱javascript滑鼠中鍵滾動事件介紹一章節，裡面有詳細說明。

相關文章