激情小说在线视频,岛国大片在线一,日韩精品系列在线

javascript鼠標事件總結

原創|其它|編輯：郝浩|2009-08-25 10:28:44.000|閱讀 616 次

概述：javascript的鼠標事件是個比較龐大的家族。常見的有以下8個：

javascript的鼠標事件是個比較龐大的家族。常見的有以下8個：

mousedown：鼠標的鍵鈕被按下。
mouseup：鼠標的鍵鈕被釋放彈起。
click：單擊鼠標的鍵鈕。
dbclick：鼠標的鍵鈕被按下。
contextmenu ：彈出右鍵菜單。
mouseover：鼠標移到目標的上方。
mouseout：鼠標移出目標的上方。
mousemove：鼠標目標的上方移動。

mousedown事件與mouseup事件可以說click事件在時間上的細分，順序是mousedown => mouseup => click。因此一個點擊事件，通常會激發幾個鼠標事件。

請在這里點擊，測試一個點擊到底捆綁了多少種鼠標事件？！

有了它們，我們可以做許多事，但對于高層次的應用（如游戲）是顯然不夠的，于是鼠標事件的點擊事件又根據究竟是點左鍵還是右鍵進行細分。在DOM2.0中，W3C對鼠標事件作了現范，鼠標事件被解析為MouseEvent（我們可以用e.constructor == MouseEvent來判斷其是否為鼠標事件，是左鍵點擊還是右鍵點擊由它的一個叫button的屬性判定。以下就是W3C的標準現范：

0：按下左鍵
1：按下中鍵（如果有的話）
2：按下右鍵

當然微軟是不會妥協的，因為e.button本來就是微軟最先實現的，網景用的是e.which，但相對而言，微軟的復雜多了。

0：沒有鍵被按下
1：按下左鍵
2：按下右鍵
3：左鍵與右鍵同時被按下
4：按下中鍵
5：左鍵與中鍵同時被按下
6：中鍵與右鍵同時被按下
7：三個鍵同時被按下

更詳細的情況見下表。

GE:Gecko ;SA:Safari; OP:Opera; NS:Netscape

		IE	NS 4	GE ≥ 1.0 SA 3 OP ≥ 8.0	GE0.9	OP<8.0
e.button	左鍵	1	undefined	0	1	1
	中鍵	4	undefined	1	2	3
	右鍵	2	undefined	2	3	2
e.which	左鍵	undefined	1	1	1	1
	中鍵	undefined	2	2	2	3
	右鍵	undefined	3	3	3	2

為此我們可以使用以下函數來綁定左右鍵。

var mouseEvent = function(){ 
  var arg = arguments[0], 
  el = arg.el || document, 
  leftfn = arg.left || function(){}, 
  rightfn = arg.right || function(){}, 
  middlefn = arg.middle || function(){}, 
  buttons = {}; 
  el.onmousedown = function(e){ 
    e = e || window.event; 
    if(!+"\v1"){ 
      switch(e.button){ 
        case 1:buttons.left = true; break; 
        case 2:buttons.right = true; break; 
        case 4:buttons.middle = true; break; 
      } 
    }else{ 
      switch(e.which){ 
        case 1:buttons.left = true;break; 
        case 2:buttons.middle = true; break; 
        case 3:buttons.right = true;break; 
      } 
    } 
    if(buttons.left){ 
      leftfn(); 
    }else if(buttons.middle){ 
      middlefn(); 
    }else if(buttons.right){ 
      rightfn(); 
    } 
    buttons = { 
      "left":false, 
      "middle":false, 
      "right":false
    }; 
  } 
}

它接受一個哈希參數，都是可選項。哈希的el為要綁定鼠標事件的元素，left為點擊左鍵激發的事件，其他兩個類推。用法如下：

var el = document.getElementById("mouse"); 
var ex = document.getElementById("explanation"); 
var left = function(){ 
  ex.innerHTML = "左鍵被按下"; 
} 
var right = function(){ 
  ex.innerHTML = "右鍵被按下"; 
} 
mouseEvent({el:el,left:left,middle:null,right:right});

請在這里點擊，測試左中右鼠標鍵綁定函數

此外，通過鼠標在網頁上的點擊，我們還可以獲得許多有用的參數，如獲得當前鼠標的坐標。我們根據其參照物的不同，以下幾套坐標系。一套是以當前瀏覽器的可視區為參照物（clientX, clientY），另一套是以顯示器的屏幕為參照物（screenX, screenY）。此外微軟還有一套坐標系（x,y），它是相對于觸發事件的對象的offsetParent的，火狐有另一套坐標系（pageX, pageY），它是相對于當前網頁的。我們可以通過如下函數來獲得鼠標在網頁的坐標。

var getCoordInDocument = function(e) { 
  e = e || window.event; 
  var x = e.pageX || (e.clientX + 
    (document.documentElement.scrollLeft 
    || document.body.scrollLeft)); 
  var y= e.pageY || (e.clientY + 
    (document.documentElement.scrollTop 
    || document.body.scrollTop)); 
  return {'x':x,'y':y}; 
}

請在這里移動鼠標。

（clientX,clientY）的坐標系，不受滾動條影響

至于mouseover,mousemove,mouseout沒有什么好說，并且無瀏覽器差異。我們來看鼠標滾輪事件，這個差異很嚴重。IE、Safari、 Opera 、chrome是mousewheel事件，Firefox是DOMMouseScroll事件。事件屬性方面，IE等是event. wheelDelta，Firefox是event. detail。IE等往上滾一圈為120，往下滾一圈為-120。Firefox往上滾一圈為-3，往下滾一圈為3。我們可以構造一個函數來削除它們的差異。

var mouseScroll = function(fn){ 
  var roll = function(){ 
    var delta = 0, 
    e = arguments[0] || window.event; 
    delta = (e.wheelDelta) ? e.wheelDelta / 120 : -(e.detail || 0) / 3; 
    fn(delta);//回調函數中的回調函數 
  } 
  if(/a/[-1]=='a'){ 
    document.addEventListener('DOMMouseScroll', roll, false); 
  }else{ 
    document.onmousewheel = roll; 
  } 
}

此函數接受一函數作為參數，如：

mouseScroll(function(delta){ 
  var obj = document.getElementById('scroll'), 
  current = parseInt(obj.offsetTop)+(delta*10); 
  obj.style.top = current+"px"; 
});