如何用jQuery区分鼠标左键和右键

Question

如何使用jQuery获取单击的鼠标按钮？

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

这是由左右键单击触发的,能够捕获鼠标右键的方式是什么？如果存在以下内容,我会很高兴:

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

Answer 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!');
    }
});

Answer 2

编辑:我将其更改为适用.on()于jQuery 1.7或更高版本中使用的动态添加元素:

$(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提出了一个很好的观点,它并不总是会right-click触发contextmenu事件,而且当按下上下文菜单键时(这可以说是一个替代right-click)

Answer 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! */
    }
});

Answer 4

你也bind可以contextmenu和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/

Answer 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>

Answer 6

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

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

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

Answer 7

有很多非常好的答案,但我只是想在使用时触及IE9和IE <9之间的一个主要区别event.button.

根据旧的Microsoft规范,event.button代码与W3C使用的规范不同.W3C仅考虑3个案例:

1. 单击鼠标左键 - event.button === 1
2. 单击鼠标右键 - event.button === 3
3. 点击鼠标中键 - event.button === 2

在较旧的Internet Explorer中,微软在按下按钮时略微翻了一下,有8种情况:

1. 没有点击按钮 - event.button === 0或000
2. 单击左键 - event.button === 1或001
3. 单击右键 - event.button === 2或010
4. 单击左右按钮 - event.button === 3或011
5. 单击中间按钮 - event.button === 4或100
6. 单击中间和左侧按钮 - event.button === 5或101
7. 单击中间和右侧按钮 - event.button === 6或110
8. 单击所有3个按钮 - event.button === 7或111

尽管事实上这在理论上应该如何工作,但是没有Internet Explorer支持同时按下两个或三个按钮的情况.我提到它是因为W3C标准在理论上甚至不能支持这一点.

Answer 8

在我看来,对TheVillageIdiot的回答略有改动会更清晰:

$('#element').bind('click', function(e) {
  if (e.button == 2) {
    alert("Right click");
  }
  else {
    alert("Some other click");
  }
}

编辑:JQuery提供一个e.which属性,分别为左,中,右三次返回1,2,3.所以你也可以使用if (e.which == 3) { alert("right click"); }

另请参阅:"使用中键单击触发onclick事件"的答案