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

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

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

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

当前回答

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

其他回答

老旧的帖子,但想分享完整的答案,人们问上面所有的鼠标点击事件类型。

添加这个脚本,使它适用于整个页面:

var onMousedown = function (e) {
     if (e.which === 1) {/* Left Mouse Click */}
     else if (e.which === 2) {/* Middle Mouse Click */}
     else if (e.which === 3) {/* Right Mouse Click */}
};
clickArea.addEventListener("mousedown", onMousedown);

注意:确保你在被点击的元素上'返回false;' -这真的很重要。

干杯!

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

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

使用jquery,你可以使用事件对象类型

jQuery(".element").on("click contextmenu", function(e){
   if(e.type == "contextmenu") {
       alert("Right click");
   }
});
    $.event.special.rightclick = {
     bindType: "contextmenu",
        delegateType: "contextmenu"
      };

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