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
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的，Firefox有另一套座標系（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.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";    });

<br /><script type="text/javascript"><br /> var $ = function(id){ return document.getElementById(id)}</p><p> window.onload = function(){<br /> mouseScroll(function(delta){<br /> var obj = $('scroll'),<br /> current = parseInt(obj.offsetTop)+(delta*10);<br /> obj.style.top = current+"px";<br /> });<br /> }</p><p> var mouseScroll = function(fn){<br /> var roll = function(){<br /> var delta = 0,<br /> e = arguments[0] || window.event;<br /> delta = (e.wheelDelta) ? e.wheelDelta / 120 : -(e.detail || 0) / 3;<br /> fn(delta);//回呼函數中的回呼函數<br /> }<br /> if(window.netscape ){<br /> document.addEventListener('DOMMouseScroll', roll, false);<br /> }else{<br /> document.onmousewheel = roll;<br /> }<br /> }</p><p></script><br /><style title="text/css"><br /> #scroll {<br /> color:#fff;<br /> background:#369;<br /> width:70px;<br /> height:70px;<br /> position:absolute;<br /> left:500px;<br /> top:200px;<br /> }<br /></style></p><p><div id="scroll">請用滑鼠滾輪移動方塊</div><br />

運行代碼

相關主題：

javascript 鍵盤事件總結

javascript處理事件的一些相容寫法