|
|
常見的有以下8個(gè)：
mousedown：鼠標(biāo)的鍵鈕被按下。
mouseup：鼠標(biāo)的鍵鈕被釋放彈起。
click：?jiǎn)螕羰髽?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)事件。
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]
有了它們，我們可以做許多事，但對(duì)于高層次的應(yīng)用（如游戲）是顯然不夠的，于是鼠標(biāo)事件的點(diǎn)擊事件又根據(jù)究竟是點(diǎn)左鍵還是右鍵進(jìn)行細(xì)分。在DOM2.0中，W3C對(duì)鼠標(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，但相對(duì)而言，微軟的復(fù)雜多了。
0：沒有鍵被按下
1：按下左鍵
2：按下右鍵
3：左鍵與右鍵同時(shí)被按下
4：按下中鍵
5：左鍵與中鍵同時(shí)被按下
6：中鍵與右鍵同時(shí)被按下
7：三個(gè)鍵同時(shí)被按下
更詳細(xì)的情況見下表。
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 | |
復(fù)制代碼 代碼如下:
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è)類推。用法如下：
復(fù)制代碼 代碼如下:
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});
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]
此外，通過鼠標(biāo)在網(wǎng)頁(yè)上的點(diǎn)擊，我們還可以獲得許多有用的參數(shù)，如獲得當(dāng)前鼠標(biāo)的坐標(biāo)。根據(jù)其參照物的不同，分為以下幾套坐標(biāo)系。一套是以當(dāng)前瀏覽器的可視區(qū)為參照物（clientX, clientY），另一套是以顯示器的屏幕為參照物（screenX, screenY）。此外微軟還有一套坐標(biāo)系（x,y），它是相對(duì)于觸發(fā)事件的對(duì)象的offsetParent的，火狐有另一套坐標(biāo)系（pageX, pageY），它是相對(duì)于當(dāng)前網(wǎng)頁(yè)的。我們可以通過如下函數(shù)來獲得鼠標(biāo)在網(wǎng)頁(yè)的坐標(biāo)。
復(fù)制代碼 代碼如下:
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};
}
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]
（clientX,clientY）的坐標(biāo)系，不受滾動(dòng)條影響
至于mouseover,mousemove,mouseout沒有什么好說，并且無瀏覽器差異。我們來看鼠標(biāo)滾輪事件，這個(gè)差異很嚴(yán)重。IE、Safari、 Opera 、chrome是mousewheel事件，F(xiàn)irefox是DOMMouseScroll事件。事件屬性方面，IE等是event. wheelDelta，F(xiàn)irefox是event. detail。IE等往上滾一圈為120，往下滾一圈為-120。Firefox往上滾一圈為-3，往下滾一圈為3。我們可以構(gòu)造一個(gè)函數(shù)來削除它們的差異。
復(fù)制代碼 代碼如下:
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ù)，如：
復(fù)制代碼 代碼如下:
mouseScroll(function(delta){
var obj = document.getElementById('scroll'),
current = parseInt(obj.offsetTop)+(delta*10);
obj.style.top = current+"px";
});
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]
JavaScript技術(shù)：javascript 鼠標(biāo)事件總結(jié)，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
