讀jQuery之七（判斷點擊了鼠標哪一個鍵）

時間 2019-11-12

原文原文鏈接

jQuery丟棄了標準的 button 屬性採用 which，這有點讓人費解。javascript

which 是Firefox引入的，IE不支持。which的本意是獲取鍵盤的鍵值(keyCode)。

jQuery中的which便可以是鍵盤的鍵值，也能夠是鼠標的鍵值。
即當判斷用戶按下鍵盤的哪一個鍵時能夠使用which，當判斷用戶按下鼠標的哪一個鍵時也能夠用which。它一舉兩用了。

源碼html

// Add which for key events

if ( event.which == null && (event.charCode != null || event.keyCode != null ) ) {

event.which = event.charCode != null ? event.charCode : event.keyCode;

}

// Add which for click: 1 === left; 2 === middle; 3 === right

// Note: button is not normalized, so don't use it

if ( !event.which && event.button !== undefined ) {

event.which = (event.button & 1 ? 1 : ( event.button & 2 ? 3 : ( event.button & 4 ? 2 : 0 ) ));

}

標準的button採用0,1,2表示鼠標的左，中，右鍵。jQuery的which則使用用1,2,3。

還有一點讓人不爽的是jQuery文檔 event.which 中並無提到which能夠表示鼠標按鍵值，只提到了表示鍵盤按鍵值。

源碼中的註釋也讓人誤解。java

1	`// Add which for click: 1 === left; 2 === middle; 3 === right`

注意這裏說的是click ，很容易讓人使用click 事件，但實際上click事件中獲取是錯誤的。

下面就用 click 事件試試：jquery

<!DOCTYPE html>

<html>

<head>

<meta charset= "utf-8" />

<title></title>

<script src= "http://code.jquery.com/jquery-1.6.1.js" ></script>

<script type= "text/javascript" >

$(document).click( function (e){

alert(e.which);

})

</script>

</head>

<body>

</body>

</html>

測試結果
	IE6/7/8	IE9	Firefox4	Chrome12	Safari	Opera
點擊左鍵	0	1	1	1	1(不停彈出alert)	1
點擊中鍵	不響應	2	2	2	2(不停彈出alert)	不響應
點擊右鍵	僅彈出右鍵菜單	僅彈出右鍵菜單	3，彈出右鍵菜單	僅彈出右鍵菜單	僅彈出右鍵菜單	僅彈出右鍵菜單

能夠看到使用 click 事件並不能按照jQuery設想的那樣左，中，右鍵對應的1,2,3值。各瀏覽器下均不一致，且右鍵根本獲取不到，Safari中還不停的彈出alert。

所以，應該使用 mousedown / mouseup 事件則達到jQuery的設想。jQuery的註釋誤導了人。

此外即便使用 mousedown / mouseup 事件，Opera中也沒法獲取中鍵的值。Opera的噁心作法令jQuery也無能爲力。api

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。