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

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

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

http://jsfiddle.net/SRX3y/8/

Answer 2

Es gibt viele sehr gute Antworten, aber ich möchte nur auf einen wesentlichen Unterschied zwischen IE9 und IE <9 bei der Verwendung von event.button .

Gemäß der alten Microsoft-Spezifikation für event.button die Codes unterscheiden sich von denen, die das W3C verwendet. W3C berücksichtigt nur 3 Fälle:

1. Linke Maustaste wird geklickt - event.button === 1
2. Rechte Maustaste wird geklickt - event.button === 3
3. Mittlere Maustaste wird geklickt - event.button === 2

In älteren Internet Explorern hat Microsoft jedoch ein wenig an der gedrückten Taste gedreht und es gibt 8 Fälle:

1. Keine Schaltfläche wird angeklickt - event.button === 0 oder 000
2. Linke Taste wird angeklickt - event.button === 1 oder 001
3. Rechte Taste wird angeklickt - event.button === 2 oder 010
4. Linke und rechte Taste werden angeklickt - event.button === 3 oder 011
5. Mittlere Taste wird angeklickt - event.button === 4 oder 100
6. Mittlere und linke Taste werden angeklickt - event.button === 5 oder 101
7. Mittlere und rechte Taste werden angeklickt - event.button === 6 oder 110
8. Alle 3 Schaltflächen werden angeklickt - event.button === 7 oder 111

Obwohl es theoretisch so funktionieren sollte, hat kein Internet Explorer jemals die Fälle unterstützt, in denen zwei oder drei Tasten gleichzeitig gedrückt werden. Ich erwähne dies, weil der W3C-Standard dies nicht einmal theoretisch unterstützen kann.

Answer 3

Mir scheint, dass eine leichte Anpassung der Antwort von TheVillageIdiot sauberer wäre:

$('#element').bind('click', function(e) {
  if (e.button == 2) {
    alert("Right click");
  }
  else {
    alert("Some other click");
  }
}

EDIT: JQuery bietet eine e.which Attribut, das 1, 2 und 3 für Links-, Mittel- bzw. Rechtsklick zurückgibt. Sie könnten also auch verwenden if (e.which == 3) { alert("right click"); }

Siehe auch: Antworten auf "Onclick-Ereignis mit mittlerem Klick auslösen"

Answer 4

event.which === 1 stellt sicher, dass es ein Linksklick ist (bei Verwendung von jQuery).

Sie sollten aber auch an die Modifikatortasten denken: ctrlcmdshiftalt

Wenn Sie nur daran interessiert sind, einfache, unveränderte Linksklicks zu erfassen, können Sie so vorgehen:

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

Answer 5

Für diejenigen, die sich fragen, ob sie die folgenden Informationen verwenden sollten oder nicht event.which in Vanille JS o Eckig : Es ist jetzt Abgelehnt daher lieber mit event.buttons ではなく

Anmerkung: Mit dieser Methode und (Mousedown) Veranstaltung:

• Linksklick drücken ist verbunden mit 1
• Rechtsklick drücken ist verbunden mit 2
• Scrolltaste drücken ist verbunden mit 4

y (Mausklick) Ereignis wird NICHT liefern die gleichen Zahlen, aber 0 ではなく

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