JavaScript滑鼠中鍵滾動事件

admin發表於2018-03-07
JavaScript事件

在實際應用中，滑鼠的一些事件非常常用，例如，onclick事件、onmouseover事件等，這裡就不介紹了，具體可以參閱javascript click事件和javascript mouseover事件一章節。 還有一種事件比較少用，那就是滑鼠中鍵滾輪滾動事件，下面就通過程式碼例項簡單介紹一下中鍵滾輪事件。

IE瀏覽器和谷歌瀏覽器支援mousewheel事件，也就是滑鼠中鍵滾動事件，但是遺憾的是火狐瀏覽器並不支援此事件，而是支援DOMMouseScroll事件，下面就這兩個做一下簡單的分析對別:

一.mousewheel事件:

event.wheelDelta返回值是120的倍數，如果屬性值為正數則是向上滾動，如果是負數則是向下滾動。

滾動幅度的大小等於event.wheelDelta/120。

二.DOMMouseScroll事件:

event.detail返回值都是3的倍數，和event.wheelDelta相反，如果屬性值為負數，則是向上滾動，如果是正數則是向下滾動。

特別注意:

DOMMouseScroll不支援前面加"on"事件註冊方式，例如obj.onclick=funcion(){}。

下面對上面做一下相容性處理，以達到在任何瀏覽器中都可以順利執行。

程式碼例項如下:

[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-color:red
}
</style>
<script type="text/javascript"> 
var addEvent=(function(){        
  var _eventCompat=function(event){
    var type=event.type;
    if(type=='DOMMouseScroll'||type=='mousewheel'){
      event.delta=(event.wheelDelta)?event.wheelDelta/120:-(event.detail||0)/3;
    }
    
    if(event.srcElement&&!event.target){
      event.target=event.srcElement;    
    }
    
    if(!event.preventDefault&&event.returnValue!==undefined){
      event.preventDefault=function(){
        event.returnValue=false;
      };
    }
    return event;
  };
 
  if(window.addEventListener){
    return function(el, type, fn, capture){
      if(type==="mousewheel"&&document.mozHidden!==undefined){
        type="DOMMouseScroll";
      }
      el.addEventListener(type,function(event){
        fn.call(this, _eventCompat(event));
      },capture||false);
    }
  } 
  else if(window.attachEvent){
    return function(el, type, fn, capture){
      el.attachEvent("on" + type, function(event){
        event = event || window.event;
        fn.call(el, _eventCompat(event));    
      });
    }
  }
  return function(){};    
})(); 
window.onload=function(){
  var height=100;
  var width=100;
  var thediv=document.getElementById("thediv");
  function size(event){
    width=width+event.delta;
    height=height+event.delta;
    thediv.style.width=width+"px";
    thediv.style.height=height+"px";
  }
  addEvent(thediv,"mousewheel",size,false);
}     
</script> 
</head> 
<body> 
<div id="thediv"></div>
</body> 
</html>

當滑鼠放在div中時候，滾動滑鼠中鍵能夠縮放div的大小，下面介紹一下實現過程:

一.實現原理:

程式碼看上去稍顯複雜，其實特別的簡單，就是根據在不同瀏覽器中，相關事件的特點，進行了一些相容性處理，這是必然的操作，這裡就不多介紹了，大家直接看程式碼註釋可以瞭解相關細節。

二.程式碼註釋:

1.var addEvent=(function(){})()，宣告一個變數，它的值就是匿名函式的返回值，這個返回值就是一個函式物件。

2.var _eventCompat=function(event){})()，宣告一個變數，它的值是一個匿名函式，此匿名函式能夠封裝一個事件物件，對時間物件的屬性做一些相容性處理，此函式的引數就是事件物件。

3.var type=event.type，將事件型別型別賦值給變數type。

4.if(type=='DOMMouseScroll'||type=='mousewheel')，如果事件型別是'DOMMouseScroll'或者'mousewheel'。

5.event.delta=(event.wheelDelta)?event.wheelDelta/120:-(event.detail||0)/3，delta是一個事件物件的自定義屬性，如果支援event.wheelDelta屬性（谷歌和IE瀏覽器）則使用event.wheelDelta/120，這會得到滾動的幅度，event.wheelDelta的返回值都是120的倍數，如果在火狐瀏覽器下，則使用(event.detail||0)/3，event.detail的返回值是3的倍數。

6.if(event.srcElement&&!event.target) ，如果事件物件支援srcElement屬性且不支援target屬性，這說明是IE8和IE8以下瀏覽器。

7.event.target=event.srcElement，將target屬性值修改為event.srcElement。

8.if(window.addEventListener) ，如果支援addEventListener函式，也就是谷歌、火狐或者IE8以上瀏覽器。

9.return function(el, type, fn, capture){}，返回一個函式物件，此函式具有四個引數，第一個引數是要註冊事件處理函式的物件，第二個是事件型別，第三個是事件處理函式，第四個是一個布林值，用來說明是捕獲型別還是冒泡型別。

10.if(type==="mousewheel"&&document.mozHidden!==undefined){type="DOMMouseScroll"} 如果是火狐瀏覽器，則將type值設定為DOMMouseScroll。document.mozHidden在火狐瀏覽器中是個布林值，在谷歌和IE瀏覽器中返回值是undefined。

11.el.addEventListener(type,function(ev){}，capture||false）註冊事件處理函式。

12.fn.call(this, _eventCompat(ev));，將函式fn的呼叫物件設定為el，引數為一個封裝好的事件物件，引數ev是原始的事件物件。

相關閱讀:

（1）.target屬性參閱javascript event.target一章節。 

（2）.preventDefault參閱javascript preventDefault()一章節。 

（3）.addEventListener參閱addEventListener()和attachEvent()函式的用法一章節。

相關文章