沐鳴代理:_javascript 鼠標事件總結

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

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

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

請在這裏點擊,測試一個點擊到底捆綁了多少種鼠標事件?!

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

  • 1:按下左鍵
  • 2:按下中鍵
  • 3:按下右鍵

當然微軟是不會妥協的,因為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

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

function bindMouseEvent(el){
var args = [].slice.call(arguments),
el = el || document;
args[0] = function(){},
args[1] = args[1] || args[0],
args[2] = args[2] || args[0],
args[3] = args[3] || args[0],
el.onmousedown = function(e){
e = e || window.event;
var button = e.button;
if ( !e.which && isFinite(button) ) {
e.which = [0,1,3,0,2,0,0,0][button];//0現在代表沒有意義
}
args[e.which](e);
}
}

它接受四個參數,第一個為綁定對象,第二個左鍵按下的回調,第三個為中鍵按下的回調,第四個為右鍵按下的回調。用法如下:

var el = document.getElementById("mouse");
var ex = document.getElementById("explanation");
var left = function(){
ex.innerhtml = "左鍵被按下";
}
var middle = function(){
ex.innerhtml = "中鍵被按下";
}
var right = function(){
ex.innerHTML = "右鍵被按下";
}
bindMouseEvent(el,left,middle,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};
}

請在這裏移動鼠標。

至於mouseover,mousemove,mouseout沒有什麼好說,並且無瀏覽器差異。我們來看鼠標滾輪事件,這個差異很嚴重。IE、Safari、 Opera 、chrome是mousewheel事件,Firefox是DOMMouseScroll事件。事件屬性方面,IE等是event.detail,Firefox是event. wheelDelta。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(window.netscape ){
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";
});

站長推薦

1.雲服務推薦: 國內主流雲服務商,各類雲產品的最新活動,優惠券領取。地址:阿里雲騰訊雲華為雲

2.廣告聯盟: 整理了目前主流的廣告聯盟平台,如果你有流量,可以作為參考選擇適合你的平台點擊進入

鏈接: http://www.fly63.com/article/detial/8556