Wie man mit jQuery zwischen linkem und rechtem Mausklick unterscheidet

Question

Wie erhalten Sie die angeklickte Maustaste mit jQuery?

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

Dies wird sowohl durch Rechts- als auch durch Linksklick ausgelöst. Wie kann man den rechten Mausklick abfangen? Ich würde glücklich sein, wenn etwas wie unten existiert:

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

Answer 1

Ab jQuery Version 1.1.3, event.which normalisiert event.keyCode y event.charCode so dass Sie sich keine Sorgen über Probleme mit der Browserkompatibilität machen müssen. Dokumentation über event.which

event.which ergibt 1, 2 oder 3 für die linke, mittlere und rechte Maustaste:

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

Editar : Ich habe es so geändert, dass es für dynamisch hinzugefügte Elemente funktioniert, indem ich .on() in jQuery 1.7 oder höher:

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

デモ jsfiddle.net/Kn9s7/5

[Beginn des Originalbeitrags] So hat es bei mir funktioniert:

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

Für den Fall, dass Sie sich für mehrere Lösungen interessieren ^^

Editar : Tim Down weist darauf hin, dass es sich nicht immer um eine right-click die die contextmenu Ereignis, sondern auch, wenn die Taste des Kontextmenüs gedrückt wird (was wohl ein Ersatz für ein right-click )

Answer 3

Sie können leicht feststellen, welche Maustaste gedrückt wurde, indem Sie die which Eigenschaft des Ereignisobjekts bei Mausereignissen:

/*
  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

Sie können auch bind a contextmenu y return false :

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

デモ http://jsfiddle.net/maniator/WS9S2/

Oder Sie können ein schnelles Plugin erstellen, das dasselbe tut:

(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"); } });~~

Update für den aktuellen Stand der Dinge:

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>