本文轉(zhuǎn)自：http://www.jb51.net/article/21590.htm

javascript的鼠標(biāo)事件是個(gè)比較龐大的家族。需要的朋友可以參考下。

常見的有以下8個(gè)：
mousedown：鼠標(biāo)的鍵鈕被按下。
mouseup：鼠標(biāo)的鍵鈕被釋放彈起。
click：單擊鼠標(biāo)的鍵鈕。
dblclick：鼠標(biāo)的鍵鈕被按下。
contextmenu ：彈出右鍵菜單。
mouseover：鼠標(biāo)移到目標(biāo)的上方。
mouseout：鼠標(biāo)移出目標(biāo)的上方。
mousemove：鼠標(biāo)在目標(biāo)的上方移動(dòng)。
mousedown事件與mouseup事件可以說click事件在時(shí)間上的細(xì)分，順序是mousedown => mouseup => click。因此一個(gè)點(diǎn)擊事件，通常會(huì)激發(fā)幾個(gè)鼠標(biāo)事件。?

<script type="text/javascript"> var loadEvent = function(fn) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = fn; }else { window.onload = function() { oldonload(); fn(); } } } var checkevents = function(){ var demo = document.getElementById("mouse"); var ex = document.getElementById("explanation"); demo.onclick = function(){ ex.style.display = "block"; ex.innerHTML += "click<br>" } demo.ondblclick = function(){ ex.style.display = "block"; ex.innerHTML += "dblclick<br>" } demo.onmouseup = function(){ ex.style.display = "block"; ex.innerHTML += "mouseup<br>" } demo.onmousedown = function(){ ex.style.display = "block"; ex.innerHTML += "mousedown<br>" } demo.oncontextmenu = function(){ ex.style.display = "block"; ex.innerHTML += "contextmenu<br>" } } var clearcontent = function(){ var reset = document.getElementById("clearcontent"); var ex = document.getElementById("explanation"); reset.onclick = function(){ ex.innerHTML = ''; ex.style.display = "none"; } } loadEvent(function(){ clearcontent(); checkevents(); }) </script> <div id="mouse" style="width:500px;height:200px;background:#E8FFE8;border:2px solid #336699;"> 請?jiān)谶@里點(diǎn)擊，測試一個(gè)點(diǎn)擊到底捆綁了多少種鼠標(biāo)事件？！ </div> <p><button type="button" id="clearcontent">清空</button></p> <div id="explanation" style="width:500px;border:2px solid #336699;display:none;"></div>
有了它們，我們可以做許多事，但對于高層次的應(yīng)用（如游戲）是顯然不夠的，于是鼠標(biāo)事件的點(diǎn)擊事件又根據(jù)究竟是點(diǎn)左鍵還是右鍵進(jìn)行細(xì)分。在DOM2.0中，W3C對鼠標(biāo)事件作了現(xiàn)范，鼠標(biāo)事件被解析為MouseEvent（我們可以用e.constructor == MouseEvent來判斷其是否為鼠標(biāo)事件，是左鍵點(diǎn)擊還是右鍵點(diǎn)擊由它的一個(gè)叫button的屬性判定。以下就是W3C的標(biāo)準(zhǔn)現(xiàn)范：

0：按下左鍵
1：按下中鍵（如果有的話）
2：按下右鍵
當(dāng)然微軟是不會(huì)妥協(xié)的，因?yàn)閑.button本來就是微軟最先實(shí)現(xiàn)的，網(wǎng)景用的是e.which，但相對而言，微軟的復(fù)雜多了。

0：沒有鍵被按下
1：按下左鍵
2：按下右鍵
3：左鍵與右鍵同時(shí)被按下
4：按下中鍵
5：左鍵與中鍵同時(shí)被按下
6：中鍵與右鍵同時(shí)被按下
7：三個(gè)鍵同時(shí)被按下
更詳細(xì)的情況見下表。
GE:Gecko ;SA:Safari; OP:Opera; NS:Netscape

?IENS 4GE?≥?1.0
SA 3
OP?≥?8.0GE0.9OP<8.0142

e.button	左鍵	undefined	0	1	1
	中鍵	undefined	1	2	3
	右鍵	undefined	2	3	2
e.which	左鍵	undefined	1	1	1	1
	中鍵	undefined	2	2	2	3
	右鍵	undefined	3	3	3	2

為此我們可以使用以下函數(shù)來綁定左右鍵。?

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 }; } }
它接受一個(gè)哈希參數(shù)，都是可選項(xiàng)。哈希的el為要綁定鼠標(biāo)事件的元素，left為點(diǎn)擊左鍵激發(fā)的事件，其他兩個(gè)類推。用法如下：

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});
<div id="mouse2" style="width:500px;height:200px;background:#E8FFE8;border:2px solid #336699;"> 請?jiān)谶@里點(diǎn)擊，測試左中右鼠標(biāo)鍵綁定函數(shù) </div> <div id="explanation2" style="width:500px;border:2px solid #336699;"> </div> <script type="text/javascript"> var loadEvent = function(fn) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = fn; }else { window.onload = function() { oldonload(); fn(); } } } 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 }; } } var checkeventbutton = function(){ var el = document.getElementById("mouse2"); var ex = document.getElementById("explanation2"); var left = function(){ ex.innerHTML = "左鍵被按下"; } var middle = function(){ ex.innerHTML = "中鍵被按下"; } var right = function(){ ex.innerHTML = "右鍵被按下"; } mouseEvent({el:el,left:left,middle:middle,right:right}); } loadEvent(function(){ checkeventbutton(); }) </script>
此外，通過鼠標(biāo)在網(wǎng)頁上的點(diǎn)擊，我們還可以獲得許多有用的參數(shù)，如獲得當(dāng)前鼠標(biāo)的坐標(biāo)。根據(jù)其參照物的不同，分為以下幾套坐標(biāo)系。一套是以當(dāng)前瀏覽器的可視區(qū)為參照物（clientX, clientY），另一套是以顯示器的屏幕為參照物（screenX, screenY）。此外微軟還有一套坐標(biāo)系（x,y），它是相對于觸發(fā)事件的對象的offsetParent的，火狐有另一套坐標(biāo)系（pageX, pageY），它是相對于當(dāng)前網(wǎng)頁的。我們可以通過如下函數(shù)來獲得鼠標(biāo)在網(wǎng)頁的坐標(biāo)。

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}; }
<script type="text/javascript"> var loadEvent = function(fn) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = fn; }else { window.onload = function() { oldonload(); fn(); } } } var getCoordInDocumentExample = function(){ var coords = document.getElementById("coords"); coords.onmousemove = function(e){ var pointer = getCoordInDocument(e); var coord = document.getElementById("coord"); coord.innerHTML = "X,Y=("+pointer.x+", "+pointer.y+")"; } } 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}; } loadEvent(function(){ getCoordInDocumentExample(); }); </script> <div id="coords" style="width:500px;height:200px;background:#F2F1D7;border:2px solid #336699;"> 請?jiān)谶@里移動(dòng)鼠標(biāo)。 </div> <div id="coord" style="width:500px;border:2px solid #336699;"> </div>

（clientX,clientY）的坐標(biāo)系，不受滾動(dòng)條影響
至于mouseover,mousemove,mouseout沒有什么好說，并且無瀏覽器差異。我們來看鼠標(biāo)滾輪事件，這個(gè)差異很嚴(yán)重。IE、Safari、 Opera 、chrome是mousewheel事件，Firefox是DOMMouseScroll事件。事件屬性方面，IE等是event. wheelDelta，Firefox是event. detail。IE等往上滾一圈為120，往下滾一圈為-120。Firefox往上滾一圈為-3，往下滾一圈為3。我們可以構(gòu)造一個(gè)函數(shù)來削除它們的差異。

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);//回調(diào)函數(shù)中的回調(diào)函數(shù) } if(/a/[-1]=='a'){ document.addEventListener('DOMMouseScroll', roll, false); }else{ document.onmousewheel = roll; } }
此函數(shù)接受一函數(shù)作為參數(shù)，如：

mouseScroll(function(delta){ var obj = document.getElementById('scroll'), current = parseInt(obj.offsetTop)+(delta*10); obj.style.top = current+"px"; });
<script type="text/javascript"> var $ = function(id){ return document.getElementById(id)} window.onload = function(){ mouseScroll(function(delta){ var obj = $('scroll'), current = parseInt(obj.offsetTop)+(delta*10); obj.style.top = current+"px"; }); } 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);//回調(diào)函數(shù)中的回調(diào)函數(shù) } if(/a/[-1]=='a'){ document.addEventListener('DOMMouseScroll', roll, false); }else{ document.onmousewheel = roll; } } </script> <style title="text/css"> #scroll { color:#fff; background:#369; width:70px; height:70px; position:absolute; left:500px; top:200px; } </style> <div id="scroll">請用鼠標(biāo)滾輪移動(dòng)方塊</div>
本文到此結(jié)束。

總結(jié)

以上是生活随笔為你收集整理的javascript 鼠标事件总结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。