如何使用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");}   
});

其他回答

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

根据旧的微软事件规范。按钮的代码与W3C使用的代码不同。W3C只考虑3种情况:

点击鼠标左键-事件。按钮=== 1 单击鼠标右键-事件。按钮=== 3 鼠标中间按钮被单击-事件。按钮=== 2

然而,在老式的ie浏览器中,微软会为按下的按钮翻转一些,有8种情况:

没有按钮被点击-事件。按钮=== 0或000 左键被点击-事件。按钮=== 1或001 单击右键-事件。按钮=== 2或010 单击左右按钮-事件。按钮=== 3或011 中间按钮被单击-事件。按钮== 4或100 中间和左边的按钮被单击-事件。按钮== 5或101 中间和右边的按钮被单击-事件。按钮== 6或110 所有3个按钮都被单击-事件。按钮== 7或111

尽管理论上它应该是这样工作的,但没有任何ie浏览器支持同时按下两个或三个按钮的情况。我之所以提到它,是因为W3C标准甚至在理论上不支持这一点。

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

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

$("#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>

事件。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...
  }
});