JavaScript 滑鼠點選事件的整合
事件種類
滑鼠事件指與滑鼠相關的事件,主要有以下一些。
(1)click事件
click
事件當用戶在Element節點、document節點、window物件上,單擊滑鼠(或者按下回車鍵)時觸發。
“滑鼠單擊”定義為,使用者在同一個位置完成一次mousedown
動作和mouseup
動作。它們的觸發順序是:mousedown
首先觸發,mouseup
接著觸發,click
最後觸發。
下面是一個設定click事件監聽函式的例子。
div.addEventListener("click", function( event ) {
// 顯示在該節點,滑鼠連續點選的次數
event.target.innerHTML = "click count: " + event.detail;
}, false);
下面的程式碼是利用click事件進行CSRF攻擊(Cross-site request forgery)的一個例子。
<a href="http://www.harmless.com/" onclick="
var f = document.createElement('form');
f.style.display = 'none';
this.parentNode.appendChild(f);
f.method = 'POST';
f.action = 'http://www.example.com/account/destroy';
f.submit();
return false;" >偽裝的連結</a>
(2)dblclick事件
dblclick
事件當用戶在element
、document
、window
物件上,雙擊滑鼠時觸發。該事件會在mousedown
、mouseup
、click
之後觸發。
(3)mouseup事件,mousedown事件
mouseup事件在釋放按下的滑鼠鍵時觸發。
mousedown事件在按下滑鼠鍵時觸發。
(4)mousemove事件
mousemove
事件當滑鼠在一個節點內部移動時觸發。當滑鼠持續移動時,該事件會連續觸發。為了避免效能問題,建議對該事件的監聽函式做一些限定,比如限定一段時間內只能執行一次程式碼。
(5)mouseover事件,mouseenter事件
mouseover
事件和mouseenter
事件,都是滑鼠進入一個節點時觸發。
兩者的區別是,mouseenter
事件只觸發一次,而只要滑鼠在節點內部移動,mouseover
事件會在子節點上觸發多次。
// HTML程式碼為
// <ul id="test">
// <li>item 1</li>
// <li>item 2</li>
// <li>item 3</li>
// </ul>
var test = document.getElementById('test');
// 進入test節點以後,該事件只會觸發一次
// event.target 是 ul 節點
test.addEventListener('mouseenter', function (event) {
event.target.style.color = 'purple';
setTimeout(function () {
event.target.style.color = '';
}, 500);
}, false);
// 進入test節點以後,只要在子Element節點上移動,該事件會觸發多次
// event.target 是 li 節點
test.addEventListener('mouseover', function (event) {
event.target.style.color = 'orange';
setTimeout(function () {
event.target.style.color = '';
}, 500);
}, false);
(6)mouseout事件,mouseleave事件
mouseout事件和mouseleave事件,都是滑鼠離開一個節點時觸發。
兩者的區別是,mouseout事件會冒泡,mouseleave事件不會。子節點的mouseout事件會冒泡到父節點,進而觸發父節點的mouseout事件。mouseleave事件就沒有這種效果,所以離開子節點時,不會觸發父節點的監聽函式。
(7)contextmenu
contextmenu
事件在一個節點上點選滑鼠右鍵時觸發,或者按下“上下文選單”鍵時觸發。
MouseEvent物件
滑鼠事件使用MouseEvent物件表示,它繼承UIEvent物件和Event物件。瀏覽器提供一個MouseEvent建構函式,用於新建一個MouseEvent例項。
event = new MouseEvent(typeArg, mouseEventInit);
MouseEvent建構函式的第一個引數是事件名稱(可能的值包括click、mousedown、mouseup、mouseover、mousemove、mouseout),第二個引數是一個事件初始化物件。該物件可以配置以下屬性。
- screenX,設定滑鼠相對於螢幕的水平座標(但不會移動滑鼠),預設為0,等同於MouseEvent.screenX屬性。
- screenY,設定滑鼠相對於螢幕的垂直座標,預設為0,等同於MouseEvent.screenY屬性。
- clientX,設定滑鼠相對於視窗的水平座標,預設為0,等同於MouseEvent.clientX屬性。
- clientY,設定滑鼠相對於視窗的垂直座標,預設為0,等同於MouseEvent.clientY屬性。
- ctrlKey,設定是否按下ctrl鍵,預設為false,等同於MouseEvent.ctrlKey屬性。
- shiftKey,設定是否按下shift鍵,預設為false,等同於MouseEvent.shiftKey屬性。
- altKey,設定是否按下alt鍵,預設為false,等同於MouseEvent.altKey屬性。
- metaKey,設定是否按下meta鍵,預設為false,等同於MouseEvent.metaKey屬性。
- button,設定按下了哪一個滑鼠按鍵,預設為0。-1表示沒有按鍵,0表示按下主鍵(通常是左鍵),1表示按下輔助鍵(通常是中間的鍵),2表示按下次要鍵(通常是右鍵)。
- buttons,設定按下了滑鼠哪些鍵,是一個3個位元位的二進位制值,預設為0。1表示按下主鍵(通常是左鍵),2表示按下次要鍵(通常是右鍵),4表示按下輔助鍵(通常是中間的鍵)。
- relatedTarget,設定一個Element節點,在mouseenter和mouseover事件時,表示滑鼠剛剛離開的那個Element節點,在mouseout和mouseleave事件時,表示滑鼠正在進入的那個Element節點。預設為null,等同於MouseEvent.relatedTarget屬性。
以下屬性也是可配置的,都繼承自UIEvent建構函式和Event建構函式。
- bubbles,布林值,設定事件是否冒泡,預設為false,等同於Event.bubbles屬性。
- cancelable,布林值,設定事件是否可取消,預設為false,等同於Event.cancelable屬性。
- view,設定事件的檢視,一般是window或document.defaultView,等同於Event.view屬性。
- detail,設定滑鼠點選的次數,等同於Event.detail屬性。
下面是一個例子。
function simulateClick() {
var event = new MouseEvent('click', {
'bubbles': true,
'cancelable': true
});
var cb = document.getElementById('checkbox');
cb.dispatchEvent(event);
}
上面程式碼生成一個滑鼠點選事件,並觸發該事件。
以下介紹MouseEvent例項的屬性。
altKey,ctrlKey,metaKey,shiftKey
以下屬性返回一個布林值,表示滑鼠事件發生時,是否按下某個鍵。
- altKey屬性:alt鍵
- ctrlKey屬性:key鍵
- metaKey屬性:Meta鍵(Mac鍵盤是一個四瓣的小花,Windows鍵盤是Windows鍵)
- shiftKey屬性:Shift鍵
// HTML程式碼為
// <body onclick="showkey(event);">
function showKey(e){
console.log("ALT key pressed: " + e.altKey);
console.log("CTRL key pressed: " + e.ctrlKey);
console.log("META key pressed: " + e.metaKey);
console.log("SHIFT key pressed: " + e.shiftKey);
}
上面程式碼中,點選網頁會輸出是否同時按下Alt鍵。
button,buttons
以下屬性返回事件的滑鼠鍵資訊。
(1)button
button屬性返回一個數值,表示按下了滑鼠哪個鍵。
- -1:沒有按下鍵。
- 0:按下主鍵(通常是左鍵)。
- 1:按下輔助鍵(通常是中鍵或者滾輪鍵)。
- 2:按下次鍵(通常是右鍵)。
// HTML程式碼為
// <button onmouseup="whichButton(event);">點選</button>
var whichButton = function (e) {
switch (e.button) {
case 0:
console.log('Left button clicked.');
break;
case 1:
console.log('Middle button clicked.');
break;
case 2:
console.log('Right button clicked.');
break;
default:
console.log('Unexpected code: ' + e.button);
}
}
(2)buttons
buttons屬性返回一個3個位元位的值,表示同時按下了哪些鍵。它用來處理同時按下多個滑鼠鍵的情況。
- 1:二進位制為001,表示按下左鍵。
- 2:二進位制為010,表示按下右鍵。
- 4:二進位制為100,表示按下中鍵或滾輪鍵。
同時按下多個鍵的時候,每個按下的鍵對應的位元位都會有值。比如,同時按下左鍵和右鍵,會返回3(二進位制為011)。
clientX,clientY,movementX,movementY,screenX,screenY
以下屬性與事件的位置相關。
(1)clientX,clientY
clientX屬性返回滑鼠位置相對於瀏覽器視窗左上角的水平座標,單位為畫素,與頁面是否橫向滾動無關。
clientY屬性返回滑鼠位置相對於瀏覽器視窗左上角的垂直座標,單位為畫素,與頁面是否縱向滾動無關。
// HTML程式碼為
// <body onmousedown="showCoords(event)">
function showCoords(evt){
console.log(
"clientX value: " + evt.clientX + "\n" +
"clientY value: " + evt.clientY + "\n"
);
}
(2)movementX,movementY
movementX屬性返回一個水平位移,單位為畫素,表示當前位置與上一個mousemove事件之間的水平距離。在數值上,等於currentEvent.movementX = currentEvent.screenX - previousEvent.screenX。
movementY屬性返回一個垂直位移,單位為畫素,表示當前位置與上一個mousemove事件之間的垂直距離。在數值上,等於currentEvent.movementY = currentEvent.screenY - previousEvent.screenY。
(3)screenX,screenY
screenX屬性返回滑鼠位置相對於螢幕左上角的水平座標,單位為畫素。
screenY屬性返回滑鼠位置相對於螢幕左上角的垂直座標,單位為畫素。
// HTML程式碼為
// <body onmousedown="showCoords(event)">
function showCoords(evt){
console.log(
"screenX value: " + evt.screenX + "\n"
+ "screenY value: " + evt.screenY + "\n"
);
}
relatedTarget
relatedTarget屬性返回事件的次要相關節點。對於那些沒有次要相關節點的事件,該屬性返回null。
下表列出不同事件的target屬性和relatedTarget屬性含義。
事件名稱 | target屬性 | relatedTarget屬性 |
---|---|---|
focusin | 接受焦點的節點 | 喪失焦點的節點 |
focusout | 喪失焦點的節點 | 接受焦點的節點 |
mouseenter | 將要進入的節點 | 將要離開的節點 |
mouseleave | 將要離開的節點 | 將要進入的節點 |
mouseout | 將要離開的節點 | 將要進入的節點 |
mouseover | 將要進入的節點 | 將要離開的節點 |
dragenter | 將要進入的節點 | 將要離開的節點 |
dragexit | 將要離開的節點 | 將要進入的節點 |
下面是一個例子。
// HTML程式碼為
// <div id="outer" style="height:50px;width:50px;border-width:1px solid black;">
// <div id="inner" style="height:25px;width:25px;border:1px solid black;"></div>
// </div>
var inner = document.getElementById("inner");
inner.addEventListener("mouseover", function (){
console.log('進入' + event.target.id + " 離開" + event.relatedTarget.id);
});
inner.addEventListener("mouseenter", function (){
console.log('進入' + event.target.id + " 離開" + event.relatedTarget.id);
});
inner.addEventListener("mouseout", function (){
console.log('離開' + event.target.id + " 進入" + event.relatedTarget.id);
});
inner.addEventListener("mouseleave", function (){
console.log('離開' + event.target.id + " 進入" + event.relatedTarget.id);
});
// 滑鼠從outer進入inner,輸出
// 進入inner 離開outer
// 進入inner 離開outer
// 滑鼠從inner進入outer,輸出
// 離開inner 進入outer
// 離開inner 進入outer
wheel事件
wheel事件是與滑鼠滾輪相關的事件,目前只有一個wheel事件。使用者滾動滑鼠的滾輪,就觸發這個事件。
該事件除了繼承了MouseEvent、UIEvent、Event的屬性,還有幾個自己的屬性。
- deltaX:返回一個數值,表示滾輪的水平滾動量。
- deltaY:返回一個數值,表示滾輪的垂直滾動量。
- deltaZ:返回一個數值,表示滾輪的Z軸滾動量。
- deltaMode:返回一個數值,表示滾動的單位,適用於上面三個屬性。0表示畫素,1表示行,2表示頁。
瀏覽器提供一個WheelEvent建構函式,可以用來生成滾輪事件的例項。它接受兩個引數,第一個是事件名稱,第二個是配置物件。
var syntheticEvent = new WheelEvent("syntheticWheel", {"deltaX": 4, "deltaMode": 0});