讀jQuery之七 判斷點(diǎn)擊了鼠標(biāo)哪個(gè)鍵的代碼
更新時(shí)間：2011年06月21日 00:12:29 作者：
jQuery中的which即可以是鍵盤的鍵值，也可以是鼠標(biāo)的鍵值。
jQuery丟棄了標(biāo)準(zhǔn)的 button 屬性采用 which，這有點(diǎn)讓人費(fèi)解。
which 是Firefox引入的，IE不支持。which的本意是獲取鍵盤的鍵值(keyCode)。
jQuery中的which即可以是鍵盤的鍵值，也可以是鼠標(biāo)的鍵值。
即當(dāng)判斷用戶按下鍵盤的哪個(gè)鍵時(shí)可以使用which，當(dāng)判斷用戶按下鼠標(biāo)的哪個(gè)鍵時(shí)也可以用which。它一舉兩用了。
源碼
// 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 ) ));
}
標(biāo)準(zhǔn)的button采用0,1,2表示鼠標(biāo)的左，中，右鍵。jQuery的which則使用用1,2,3。
還有一點(diǎn)讓人不爽的是jQuery文檔 event.which 中并沒有提到which可以表示鼠標(biāo)按鍵值，只提到了表示鍵盤按鍵值。
源碼中的注釋也讓人誤解。
// Add which for click: 1 === left; 2 === middle; 3 === right
注意這里說的是click ，很容易讓人使用click 事件，但實(shí)際上click事件中獲取是錯(cuò)誤的。
下面就用 click 事件試試：
<!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>
which 是Firefox引入的，IE不支持。which的本意是獲取鍵盤的鍵值(keyCode)。
jQuery中的which即可以是鍵盤的鍵值，也可以是鼠標(biāo)的鍵值。
即當(dāng)判斷用戶按下鍵盤的哪個(gè)鍵時(shí)可以使用which，當(dāng)判斷用戶按下鼠標(biāo)的哪個(gè)鍵時(shí)也可以用which。它一舉兩用了。
源碼
復(fù)制代碼 代碼如下:
// 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 ) ));
}
標(biāo)準(zhǔn)的button采用0,1,2表示鼠標(biāo)的左，中，右鍵。jQuery的which則使用用1,2,3。
還有一點(diǎn)讓人不爽的是jQuery文檔 event.which 中并沒有提到which可以表示鼠標(biāo)按鍵值，只提到了表示鍵盤按鍵值。
源碼中的注釋也讓人誤解。
復(fù)制代碼 代碼如下:
// Add which for click: 1 === left; 2 === middle; 3 === right
注意這里說的是click ，很容易讓人使用click 事件，但實(shí)際上click事件中獲取是錯(cuò)誤的。
下面就用 click 事件試試：
復(fù)制代碼 代碼如下:
<!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 | |
| 點(diǎn)擊左鍵 | 0 | 1 | 1 | 1 | 1(不停彈出alert) | 1 |
| 點(diǎn)擊中鍵 | 不響應(yīng) | 2 | 2 | 2 | 2(不停彈出alert) | 不響應(yīng) |
| 點(diǎn)擊右鍵 | 僅彈出右鍵菜單 | 僅彈出右鍵菜單 | 3，彈出右鍵菜單 | 僅彈出右鍵菜單 | 僅彈出右鍵菜單 | 僅彈出右鍵菜單 |
可以看到使用 click 事件并不能按照jQuery設(shè)想的那樣左，中，右鍵對(duì)應(yīng)的1,2,3值。各瀏覽器下均不一致，且右鍵根本獲取不到，Safari中還不停的彈出alert。
因此，應(yīng)該使用 mousedown / mouseup 事件則達(dá)到j(luò)Query的設(shè)想。jQuery的注釋誤導(dǎo)了人。
此外即使使用 mousedown / mouseup 事件，Opera中也無法獲取中鍵的值。Opera的惡心做法令jQuery也無能為力。
相關(guān)文章
詳解jquery validate實(shí)現(xiàn)表單驗(yàn)證 （正則表達(dá)式）
本篇文章主要介紹了jquery validate實(shí)現(xiàn)表單驗(yàn)證 （正則表達(dá)式），用戶填寫表單時(shí)，可以快速地對(duì)用戶填寫的數(shù)據(jù)進(jìn)行驗(yàn)證，并做出反饋。有興趣的可以了解一下。2017-01-01
jQuery 1.3 和 Validation 驗(yàn)證插件1.5.1
jQuery 1.3已經(jīng)新鮮出爐了，你可以通過jQuery 的官方博客查看相關(guān)細(xì)節(jié)。jQuery三歲了！2009-07-07
siblings()方法返回被選元素的所有同級(jí)元素。同級(jí)元素是共享相同父元素的元素。但是很多朋友不清楚jQuery中的siblings()是什么意思，今天小編給大家介紹下2016-12-12
jQuery實(shí)現(xiàn)三級(jí)菜單的代碼
上周新接手一個(gè)網(wǎng)站建設(shè)的活兒，其中有需要要jquery代碼實(shí)現(xiàn)三級(jí)菜單的需求，其實(shí)說難也不難，下面小編把代碼分享給大家，供大家參考
2016-05-05 
jquery怎樣實(shí)現(xiàn)ajax聯(lián)動(dòng)框(二)
ajax聯(lián)動(dòng)框想必大家早有所耳聞，接下來將介紹jquery實(shí)現(xiàn)另一種形式的聯(lián)動(dòng)框，右邊的聯(lián)動(dòng)框用jquery生成，仿照上篇的js方法修改的，感興趣的你可以參考下希望可以幫助到你
2013-03-03 
jQuery實(shí)現(xiàn)的手動(dòng)拖動(dòng)控制進(jìn)度條效果示例【測(cè)試可用】
這篇文章主要介紹了jQuery實(shí)現(xiàn)的手動(dòng)拖動(dòng)控制進(jìn)度條效果,涉及jQuery事件響應(yīng)及頁面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2018-04-04 
jQuery+JSON實(shí)現(xiàn)AJAX二級(jí)聯(lián)動(dòng)實(shí)例分析
這篇文章主要介紹了jQuery+JSON實(shí)現(xiàn)AJAX二級(jí)聯(lián)動(dòng)的方法,以實(shí)例形式分析了前臺(tái)jQuery結(jié)合ajax傳遞json格式數(shù)據(jù)及后臺(tái)數(shù)據(jù)處理技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-12-12 
jQuery 復(fù)合選擇器應(yīng)用的幾個(gè)例子
這篇文章主要介紹了jQuery 復(fù)合選擇器應(yīng)用的幾個(gè)例子,本文例子所引用的jQuery版本為 jQuery-1.8.3.min.js，喜歡的朋友可以學(xué)習(xí)下
2014-09-09 
老規(guī)矩，先上html和css,還是用官方的，只是去掉了些東西
2012-07-07