沐鳴代理:_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