Javascript 如何使用jQuery区分鼠标左键和右键单击

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

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

这是由右击和左击触发的，怎样才能捕捉到鼠标右击？如果存在以下情况，我会很高兴：

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

更新内容的当前状态：

var$log=$（“div.log”）；
$（“div.target”）。在（“mousedown”，function（）上{
$log.text（“Which:+event.Which”）；
if（event.which==1）{
$（this.removeClass（“右中”）.addClass（“左”）；
}else if（event.which==2）{
$（this.removeClass（“左-右”）.addClass（“中”）；
}else if（event.which==3）{
$（此）.removeClass（“左中”）.addClass（“右”）；
}
});
div.target{
边框：1px纯蓝色；
高度：100px；
宽度：100px；
}
左分区目标{
背景色：#0faf3d；
}
对{
背景色：#f093df；
}
中区{
背景色：#00afd3；
}
div.log{
文本对齐：左对齐；
颜色：#f00；
}
通过检查鼠标事件上事件对象的
哪个属性，您可以轻松判断按下了哪个鼠标按钮：

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

在我看来，稍微修改一下Villageidiot的答案会更干净：

$('#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”）；}

另请参见：从jQuery版本1.1.3开始，对的回答，
事件。它将
事件.keyCode
和
事件.charCode>规范化，因此您不必担心浏览器兼容性问题

事件。该事件将分别为鼠标左键、中键和右键提供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!');
    }
});

编辑：我使用jQuery 1.7或更高版本中的
.on（）
将其更改为用于动态添加的元素：

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

演示：

[原始帖子开始]这就是我的工作：

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

以防您陷入多种解决方案^^

编辑：Tim Down提出了一个很好的观点，即触发
上下文菜单
事件的并非总是
右键单击
，而是在按下上下文菜单键时触发（可以说这是对
右键单击
的替代）
您还可以将
绑定到
上下文菜单
并
返回false
：

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

演示：

或者，您可以制作一个快速插件，该插件也可以执行相同的操作：

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

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

  };
})( jQuery );

演示：


使用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.

演示：

有很多非常好的答案，但我只想在使用
事件按钮时谈谈IE9和IE<9之间的一个主要区别

根据微软关于
event.button
的旧规范，这些代码与W3C使用的代码不同。W3C只考虑3种情况：

单击鼠标左键-
event.button==1
单击鼠标右键-
event.button==3
单击鼠标中键-
event.button==2
然而，在较旧的Internet Explorer中，Microsoft正在为按下的按钮翻转一点，共有8种情况：

未单击任何按钮-
事件。按钮===0
或000
单击左按钮-
事件。按钮===1
或001
单击右按钮-
事件。按钮===2
或010
单击左侧和右侧按钮-
event.button===3
或011
单击中间按钮-
事件。按钮===4
或100
单击中间和左侧按钮-
event.button===5
或101
单击中间和右侧按钮-
event.button===6
或110
所有3个按钮都被单击-
event.button===7
或111
尽管理论上它应该是这样工作的，但没有一个Internet Explorer支持同时按下两个或三个按钮的情况。我之所以提到它，是因为W3C标准甚至在理论上都不能支持这一点。
event.which===1
确保它是一个左键单击（使用jQuery时）

$(document).ready(function () {
    var resizing = false;
    var frame = $("#frame");
    var origHeightFrame = frame.height();
    var origwidthFrame = frame.width();
    var origPosYGrip = $("#frame-grip").offset().top;
    var origPosXGrip = $("#frame-grip").offset().left;
    var gripHeight = $("#frame-grip").height();
    var gripWidth = $("#frame-grip").width();

    $("#frame-grip").mouseup(function (e) {
        resizing = false;
    });

    $("#frame-grip").mousedown(function (e) {
        resizing = true;
    });
    document.onmousemove = getMousepoints;
    var mousex = 0, mousey = 0, scrollTop = 0, scrollLeft = 0;
    function getMousepoints() {
        if (resizing) {
            var MouseBtnClick = event.which;
            if (MouseBtnClick == 1) {
                scrollTop = document.documentElement ? document.documentElement.scrollTop : document.body.scrollTop;
                scrollLeft = document.documentElement ? document.documentElement.scrollLeft : document.body.scrollLeft;
                mousex = event.clientX + scrollLeft;
                mousey = event.clientY + scrollTop;

                frame.height(mousey);
                frame.width(mousex);
            }
            else {
                resizing = false;
            }
        }
        return true;

    }


});

但您还应该考虑修改键：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...
  }
});

使用jquery，您可以使用

还有一种方法，不用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
    }
});

document.addEventListener（“鼠标向下”，函数（evt）{
开关（电动按钮）{
案例1://鼠标左键
案例2://鼠标右键
案例3://鼠标中键如果您正在寻找“更好的Javascript鼠标事件”，它允许


左鼠标向下
中鼠标镇
鼠标右键向下
左鼠标
中鼠标
右滑鼠
左键单击
中击
右击
鼠标滚轮向上
鼠标滚轮放下

看看这个跨浏览器的普通javascript，它触发了上述事件，并消除了令人头痛的工作。只需将其复制并粘贴到脚本的头部，或将其包含在文档的
中的文件中。然后绑定事件，参考下面的下一个代码块，该代码块显示了捕获事件和事件的jquery示例启动分配给它们的函数，尽管这也适用于普通的javascript绑定

如果您对它的工作感兴趣，请查看JSFIDLE：

/**
更好的Javascript鼠标事件
作者：Casey Childers
**/
（功能（）{
//使用addEvent交叉浏览器垫片：https://gist.github.com/dciccale/5394590/
var addEvent=函数（a，b，c）{try{a.addEventListener（b，c，！1）}catch（d）{a.attachEvent（'on'+b，c）}）；
/*此功能检测鼠标按钮的使用情况，向左、向右、中或中滚动任意方向*/
函数GetMouseButton（e）{
e=window.event | | e；//否
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...
  }
});

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

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

jQuery(".element").on("click contextmenu", function(e){
   if(e.type == "contextmenu") {
       alert("Right click");
   }
});

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
    }
});

/**
   Better Javascript Mouse Events
   Author: Casey Childers
**/
(function(){
    // use addEvent cross-browser shim: https://gist.github.com/dciccale/5394590/
    var addEvent = function(a,b,c){try{a.addEventListener(b,c,!1)}catch(d){a.attachEvent('on'+b,c)}};

    /* This function detects what mouse button was used, left, right, middle, or middle scroll either direction */
    function GetMouseButton(e) {
        e = window.event || e; // Normalize event variable

        var button = '';
        if (e.type == 'mousedown' || e.type == 'click' || e.type == 'contextmenu' || e.type == 'mouseup') {
            if (e.which == null) {
                button = (e.button < 2) ? "left" : ((e.button == 4) ? "middle" : "right");
            } else {
                button = (e.which < 2) ? "left" : ((e.which == 2) ? "middle" : "right");
            }
        } else {
            var direction = e.detail ? e.detail * (-120) : e.wheelDelta;
            switch (direction) {
                case 120:
                case 240:
                case 360:
                    button = "up";
                break;
                case -120:
                case -240:
                case -360:
                    button = "down";
                break;
            }
        }

        var type = e.type
        if(e.type == 'contextmenu') {type = "click";}
        if(e.type == 'DOMMouseScroll') {type = "mousewheel";}

        switch(button) {
            case 'contextmenu':
            case 'left':
            case 'middle':
            case 'up':
            case 'down':
            case 'right':
                if (document.createEvent) {
                  event = new Event(type+':'+button);
                  e.target.dispatchEvent(event);
                } else {
                  event = document.createEventObject();
                  e.target.fireEvent('on'+type+':'+button, event);
                }
            break;
        }
    }

    addEvent(window, 'mousedown', GetMouseButton);
    addEvent(window, 'mouseup', GetMouseButton);
    addEvent(window, 'click', GetMouseButton);
    addEvent(window, 'contextmenu', GetMouseButton);

    /* One of FireFox's browser versions doesn't recognize mousewheel, we account for that in this line */
    var MouseWheelEvent = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel";
    addEvent(window, MouseWheelEvent, GetMouseButton);
})();

<div id="Test"></div>
<script type="text/javascript">
    $('#Test').on('mouseup',function(e){$(this).append(e.type+'<br />');})
              .on('mouseup:left',function(e){$(this).append(e.type+'<br />');})
              .on('mouseup:middle',function(e){$(this).append(e.type+'<br />');})
              .on('mouseup:right',function(e){$(this).append(e.type+'<br />');})

              .on('click',function(e){$(this).append(e.type+'<br />');})
              .on('click:left',function(e){$(this).append(e.type+'<br />');})
              .on('click:middle',function(e){$(this).append(e.type+'<br />');})
              .on('click:right',function(e){$(this).append(e.type+'<br />');})

              .on('mousedown',function(e){$(this).html('').append(e.type+'<br />');})
              .on('mousedown:left',function(e){$(this).append(e.type+'<br />');})
              .on('mousedown:middle',function(e){$(this).append(e.type+'<br />');})
              .on('mousedown:right',function(e){$(this).append(e.type+'<br />');})

              .on('mousewheel',function(e){$(this).append(e.type+'<br />');})
              .on('mousewheel:up',function(e){$(this).append(e.type+'<br />');})
              .on('mousewheel:down',function(e){$(this).append(e.type+'<br />');})
              ;
</script>

!function(){function e(e){e=window.event||e;var t="";if("mousedown"==e.type||"click"==e.type||"contextmenu"==e.type||"mouseup"==e.type)t=null==e.which?e.button<2?"left":4==e.button?"middle":"right":e.which<2?"left":2==e.which?"middle":"right";else{var n=e.detail?-120*e.detail:e.wheelDelta;switch(n){case 120:case 240:case 360:t="up";break;case-120:case-240:case-360:t="down"}}var c=e.type;switch("contextmenu"==e.type&&(c="click"),"DOMMouseScroll"==e.type&&(c="mousewheel"),t){case"contextmenu":case"left":case"middle":case"up":case"down":case"right":document.createEvent?(event=new Event(c+":"+t),e.target.dispatchEvent(event)):(event=document.createEventObject(),e.target.fireEvent("on"+c+":"+t,event))}}var t=function(e,t,n){try{e.addEventListener(t,n,!1)}catch(c){e.attachEvent("on"+t,n)}};t(window,"mousedown",e),t(window,"mouseup",e),t(window,"click",e),t(window,"contextmenu",e);var n=/Firefox/i.test(navigator.userAgent)?"DOMMouseScroll":"mousewheel";t(window,n,e)}();

$.fn.rightclick = function(func){
    $(this).mousedown(function(event){
        if(event.button == 2) {
            var oncontextmenu = document.oncontextmenu;
            document.oncontextmenu = function(){return false;};
            setTimeout(function(){document.oncontextmenu = oncontextmenu;},300);
            func(event);
            return false;
        }
    });
};

$('.item').rightclick(function(e){ 
    alert("item");
}); 

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