javascript - 如何使用 jQuery 區分左鍵和右鍵點擊

如何使用 jQuery 獲取被點擊的滑鼠按鍵？

$('div').bind('click', function(){
    alert('clicked');
});

這是由右鍵和左鍵點擊觸發的，有什麼方法能夠捕捉右鍵點擊呢？如果有像下面這樣的東西我會很高興：

$('div').bind('rightclick', function(){ 
    alert('right mouse button is pressed');
});

答案＃1

從 jQuery 版本 1.1.3 起，event.which 對 event.keyCode 和 event.charCode 進行了標準化，因此你不必擔心瀏覽器相容性問題。關於 event.which 的文件

event.which 將分別返回 1、2 或 3，代表滑鼠的左鍵、中鍵和右鍵，因此：

$('#element').mousedown(function(event) {
    switch (event.which) {
        case 1:
            alert('Left Mouse button pressed.');
            break;
        case 2:
            alert('Middle Mouse button pressed.');
            break;
        case 3:
            alert('Right Mouse button pressed.');
            break;
        default:
            alert('You have a strange Mouse!');
    }
});

答案＃2

編輯：我將它改成使用 jQuery 1.7 或以上版本的 .on() 來處理動態添加的元素：

$(document).on("contextmenu", ".element", function(e){
   alert('Context Menu event has fired!');
   return false;
});

示範: jsfiddle.net/Kn9s7/5

[原始帖子開始] 這是對我有用的方法：

$('.element').bind("contextmenu",function(e){
   alert('Context Menu event has fired!');
   return false;
});

以防你對多種解決方案有興趣 ^^

編輯：Tim Down 提出了一個好觀點，就是觸發 contextmenu 事件的不一定總是 右鍵點擊，也可能是按下快捷鍵選單鍵（這可以說是 右鍵點擊 的替代方式）

答案＃3

你可以透過檢查滑鼠事件中事件物件的 which 屬性，輕鬆判斷按下的是哪個滑鼠按鈕：

/*
  1 = Left   mouse button
  2 = Centre mouse button
  3 = Right  mouse button
*/

$([selector]).mousedown(function(e) {
    if (e.which === 3) {
        /* Right mouse button was clicked! */
    }
});

答案＃4

你也可以對 contextmenu 綁定 bind 並使用 return false：

$('selector').bind('contextmenu', function(e){
    e.preventDefault();
    //code
    return false;
});

示範: http://jsfiddle.net/maniator/WS9S2/

或者你可以製作一個快速的插件來做到同樣的事情：

(function( $ ) {
  $.fn.rightClick = function(method) {

    $(this).bind('contextmenu rightclick', function(e){
        e.preventDefault();
        method();
        return false;
    });

  };
})( jQuery );

示範： http://jsfiddle.net/maniator/WS9S2/2/

使用 .on(...) jQuery >= 1.7:

$(document).on("contextmenu", "selector", function(e){
    e.preventDefault();
    //code
    return false;
});  //does not have to use `document`, it could be any container element.

示範： http://jsfiddle.net/maniator/WS9S2/283/

答案＃5

<刪除線>

$("#element").live('click', function(e) {
  if( (!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1) ) {
       alert("Left Button");
    }
    else if(e.button == 2){
       alert("Right Button");
    }
});

目前事態的最新情況更新：

var $log = $("div.log");
$("div.target").on("mousedown", function() {
  $log.text("Which: " + event.which);
  if (event.which === 1) {
    $(this).removeClass("right middle").addClass("left");
  } else if (event.which === 2) {
    $(this).removeClass("left right").addClass("middle");
  } else if (event.which === 3) {
    $(this).removeClass("left middle").addClass("right");
  }
});

div.target {
  border: 1px solid blue;
  height: 100px;
  width: 100px;
}

div.target.left {
  background-color: #0faf3d;
}

div.target.right {
  background-color: #f093df;
}

div.target.middle {
  background-color: #00afd3;
}

div.log {
  text-align: left;
  color: #f00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="target"></div>
<div class="log"></div>

答案＃6

$.event.special.rightclick = {
    bindType: "contextmenu",
    delegateType: "contextmenu"
};

$(document).on("rightclick", "div", function() {
    console.log("hello");
    return false;
});

http://jsfiddle.net/SRX3y/8/

答案＃7

有很多非常好的回答，但我只想談一下在使用 event.button 時，IE9 與 IE 9 以下版本之間的一個主要差異。

根據舊版 Microsoft 對 event.button 的規範，代碼與 W3C 使用的不同。W3C 只考慮 3 種情況：

左鍵被點擊 - event.button === 1
右鍵滑鼠按鈕被點擊 - event.button === 3
中鍵被點擊 - event.button === 2

然而，在舊版的 Internet Explorer 中，微軟會對被按下的按鈕翻轉一個位元，共有 8 種情況：

沒有按鈕被點擊 - event.button === 0 或 000
左鍵被點擊 - event.button === 1 或 001
右鍵被點擊 - event.button === 2 或 010
左右按鈕被點擊 - event.button === 3 或 011
中間按鈕被點擊 - event.button === 4 或 100
中鍵和左鍵被點擊 - event.button === 5 或 101
中鍵和右鍵被點擊 - event.button === 6 或 110
三個按鈕全部被點擊 - event.button === 7 或 111

儘管理論上應該如此運作，但從未有任何 Internet Explorer 支援同時按下兩個或三個按鈕的情況。我提到這一點是因為 W3C 標準甚至在理論上也無法支援這種情況。