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

螞蟻小編發表於2017-03-26
JS瀏覽器事件

現在的滑鼠基本都會有滑鼠中鍵，滾動這個中鍵也會觸發一個事件，但是這個事件具有很大的瀏覽器相容性問題，下面就通過程式碼例項介紹一下如何利用javascript實現相容所有主流瀏覽器的滑鼠中鍵效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html><html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#thediv{
  width:100px;
  height:100px;
  background:red;
}
</style>
<script type="text/javascript">
function getData(event){ 
  var ev=event||window.event; 
  var data=(-ev.detail/3)||(ev.wheelDelta/120);
  this.style.width=(this.offsetWidth+data)+"px";
  this.style.height=(this.offsetHeight+data)+"px";
} 
 
function done(el,fn){
  if(document.addEventListener&&document.mozHidden!==undefined){
    el.addEventListener("DOMMouseScroll",fn,false);
  }
  else if(document.addEventListener&&document.mozHidden==undefined){
    el.addEventListener("mousewheel",fn,false)
  }
  else{
    el.attachEvent('onmousewheel',fn)
  }
}
window.onload=function(){
  var odiv=document.getElementById("thediv");
  done(odiv,getData);
}
</script> 
</head> 
<body> 
<div id="thediv"></div>
</body> 
</html>

上面的程式碼能夠實現拖動滑鼠地中鍵能夠調節div元素的尺寸。

一.實現原理:

滑鼠中鍵事件存在較低的瀏覽器相容性問題，IE瀏覽器支援mousewheel事件，但是火狐瀏覽器並不支援這個事件，而是採用DOMMouseScroll事件。註冊事件處理函式的時候也要需要特別注意，火狐的DOMMouseScroll事件只能夠使用addEventListener()進行註冊。在IE和谷歌中使用event.wheelDelta返回每滾動一次滑鼠中鍵獲值，這個值是永遠是120的倍數，向上滾動滑鼠中鍵，獲取的是正值，向下滾動獲取的是負值。在獲取中有所不同，event.detail獲取滾動的值，這個值永遠是3的倍數，和IE和谷歌相反的是，向上滾動獲取的是負值，向下滾動獲取的是正值。

二.程式碼註釋:

1.function getData(event){}，要傳遞的事件處理函式，引數是物件，它完成了調節尺寸效果。2.var ev=event||window.event，獲取事件物件，採用了相容性寫法。

3.var data=(-ev.detail/3)||(ev.wheelDelta/120)，實現了在各個瀏覽器滾動滑鼠中鍵，調節尺寸統一的效果，-ev.detail/3這個是為了讓返回值正負統一。

4.this.style.width=(this.offsetWidth+data)+"px"，設定元素的寬度。

5.this.style.height=(this.offsetHeight+data)+"px"，設定元素的高度。

6.function done(el,fn){}，封裝註冊事件處理函式，第一個引數是元素物件，第二個是事件處理函式。

7.if(document.addEventListener&&document.mozHidden!==undefined){el.addEventListener("DOMMouseScroll",fn,false);}，判斷是否是獲取瀏覽器，如果是則進行相應的操作。document.mozHidden在其他瀏覽器中返回值是undefined，在火狐中返回布林值。

8.else if(document.addEventListener&&document.mozHidden==undefined){el.addEventListener("mousewheel",fn,false)}，判斷非火狐的標準瀏覽器，然後進行相應的操作。

9.else{el.attachEvent('onmousewheel',fn)}，為IE8和IE8以下瀏覽器註冊事件處理函式。

10.window.onload=function(){},文件內容完全載入完畢再去執行函式中的程式碼。

11.var odiv=document.getElementById("thediv")，獲取元素物件。

12.done(odiv,getData)，註冊事件處理函式。

相關文章