javascript 滑鼠事件總結

來源:互聯網
上載者:User

常見的有以下8個:
mousedown:滑鼠的鍵鈕被按下。
mouseup:滑鼠的鍵鈕被釋放彈起。
click:單擊滑鼠的鍵鈕。
dblclick:滑鼠的鍵鈕被按下。
contextmenu :彈出右鍵菜單。
mouseover:滑鼠移到目標的上方。
mouseout:滑鼠移出目標的上方。
mousemove:滑鼠在目標的上方移動。
mousedown事件與mouseup事件可以說click事件在時間上的細分,順序是mousedown => mouseup => click。因此一個點擊事件,通常會激發幾個滑鼠事件。

請在這裡點擊,測試一個點擊到底捆綁了多少種滑鼠事件?!<p><button type="button" id="clearcontent">清空</button></p><p>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]

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

0:按下左鍵
1:按下中鍵(如果有的話)
2:按下右鍵
當然微軟是不會妥協的,因為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

為此我們可以使用以下函數來綁定左右鍵。
複製代碼 代碼如下: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
};
}
}

它接受一個雜湊參數,都是可選項。雜湊的el為要綁定滑鼠事件的元素,left為點擊左鍵激發的事件,其他兩個類推。用法如下: 複製代碼 代碼如下: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});

請在這裡點擊,測試左中右滑鼠鍵綁定函數 <p>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]

此外,通過滑鼠在網頁上的點擊,我們還可以獲得許多有用的參數,如獲得當前滑鼠的座標。根據其參照物的不同,分為以下幾套座標系。一套是以當前瀏覽器的可視區為參照物(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};
}

請在這裡移動滑鼠。 <p>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]


(clientX,clientY)的座標系,不受捲軸影響
至於mouseover,mousemove,mouseout沒有什麼好說,並且無瀏覽器差異。我們來看滑鼠滾輪事件,這個差異很嚴重。IE、Safari、 Opera 、chrome是mousewheel事件,Firefox是DOMMouseScroll事件。事件屬性方面,IE等是event. wheelDelta,Firefox是event. detail。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(/a/[-1]=='a'){
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 /><style title="text/css"> #scroll { color:#fff; background:#369; width:70px; height:70px; position:absolute; left:500px; top:200px; } </style>請用滑鼠滾輪移動方塊<p>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.