如何使用jQuery获得鼠标点击按钮?

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

这是由右键和左键点击触发的,有什么方法可以捕捉到鼠标右键点击?如果存在以下内容,我会很高兴:

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

当前回答

$("body").on({
    click: function(){alert("left click");},
    contextmenu: function(){alert("right click");}   
});

其他回答

对于那些不知道是否应该使用事件的人。在普通JS或Angular中:现在已弃用,所以更喜欢使用event。按钮。

注意:使用此方法和(mousedown)事件:

左键按关联到1 右键单击与2关联 滚动按钮按下与4相关联

and (mouseup)事件将不会返回相同的数字,而是0。

来源:https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons

也有一种方法,不用JQuery!

看看这个:

document.addEventListener("mousedown", function(evt) {
    switch(evt.buttons) {
      case 1: // left mouse
      case 2: // right mouse
      case 3: // middle mouse <- I didn't tested that, I just got a touchpad
    }
});

通过查看鼠标事件的事件对象的属性,你可以很容易地知道按下了哪个鼠标按钮:

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

你也可以绑定到contextmenu并返回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/

事件。which === 1确保它是一个左键点击(当使用jQuery时)。

但您还应该考虑修改器键:ctrlcmdshiftalt

如果你只对捕捉简单的、未修改的左键点击感兴趣,你可以这样做:

var isSimpleClick = function (event) {
  return !(
    event.which !== 1 || // not a left click
    event.metaKey ||     // "open link in new tab" (mac)
    event.ctrlKey ||     // "open link in new tab" (windows/linux)
    event.shiftKey ||    // "open link in new window"
    event.altKey         // "save link as"
  );
};

$('a').on('click', function (event) {
  if (isSimpleClick(event)) {
    event.preventDefault();
    // do something...
  }
});