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 mit der rechten Maustaste fangen? Ich würde mich freuen, wenn so etwas wie das Folgende existiert:
$('div').bind('rightclick', function(){
alert('right mouse button is pressed');
});
contextmenu
ist nativ im Browser. In nativem JavaScript können Sie an dasoncontextmenu
Ereignis anhängen .Bearbeiten : Ich habe es so geändert, dass es für dynamisch hinzugefügte Elemente
.on()
in jQuery 1.7 oder höher funktioniert :Demo: jsfiddle.net/Kn9s7/5
[Beginn des ursprünglichen Beitrags] Folgendes hat bei mir funktioniert:
Für den Fall, dass Sie mehrere Lösungen bevorzugen ^^
Bearbeiten : Tim Down bringt einen guten Punkt vor, dass es nicht immer ein Ereignis sein wird,
right-click
das dascontextmenu
Ereignis auslöst, sondern auch, wenn die Kontextmenütaste gedrückt wird (was wohl ein Ersatz für a istright-click
).quelle
contextmenu
Auslösen eines Ereignisses nicht immer bedeutet, dass die rechte Maustaste gedrückt wurde. Der richtige Ansatz besteht darin, Schaltflächeninformationen von einem Mausereignis abzurufen (click
in diesem Fall).Sie können leicht feststellen, welche Maustaste gedrückt wurde, indem Sie die
which
Eigenschaft des Ereignisobjekts bei Mausereignissen überprüfen :quelle
e.button==2
stattdessen.event.button
Cross-Browsers ist eher ein Problem alsevent.which
da die für die Schaltflächen verwendeten Nummernevent.button
variieren. Schauen Sie sich diesen Artikel vom Januar 2009 an - unixpapa.com/js/mouse.htmlmouseup
überprüfen, ob eine Person wirklich auf den Artikel geklickt hat? Es gibt viele Male, wenn ich versehentlich auf etwas klicke, kann ich das Klicken verhindern, indem ich die Maustaste gedrückt halte und außerhalb des Elements ziehe.mouseup
ist wahrscheinlich eine bessere Veranstaltung, dies ist nur ein Beispiel für die Verwendung vonevent.which
für MausklicksSie können auch
bind
zucontextmenu
undreturn false
:Demo: http://jsfiddle.net/maniator/WS9S2/
Oder Sie können ein schnelles Plugin erstellen, das dasselbe tut:
Demo: http://jsfiddle.net/maniator/WS9S2/2/
Verwenden von
.on(...)
jQuery> = 1.7:Demo: http://jsfiddle.net/maniator/WS9S2/283/
quelle
method.call(this, e);
anstelle von "method();
so" erfolgen,method
den korrekten Wert für erhaltenthis
und das Ereignisobjekt auch korrekt an ihn übergeben werden.Update für den aktuellen Stand der Dinge:
quelle
event.which
sie eingeführt wurde, wodurch die Cross-Browser-Kompatibilität beseitigt wird.http://jsfiddle.net/SRX3y/8/
quelle
Es gibt viele sehr gute Antworten, aber ich möchte nur einen großen Unterschied zwischen IE9 und IE <9 bei der Verwendung ansprechen
event.button
.Gemäß der alten Microsoft-Spezifikation
event.button
unterscheiden sich die Codes von denen, die von W3C verwendet werden. W3C berücksichtigt nur 3 Fälle:event.button === 1
event.button === 3
event.button === 2
In älteren Internet Explorern dreht Microsoft jedoch ein wenig nach dem gedrückten Knopf und es gibt 8 Fälle:
event.button === 0
oder 000event.button === 1
oder 001event.button === 2
oder auf 010event.button === 3
oder 011event.button === 4
oder 100event.button === 5
oder 101event.button === 6
oder 110event.button === 7
oder 111Trotz der Tatsache, dass dies theoretisch so funktionieren sollte, hat kein Internet Explorer jemals die Fälle unterstützt, in denen zwei oder drei Tasten gleichzeitig gedrückt wurden. Ich erwähne es, weil der W3C-Standard dies theoretisch nicht einmal unterstützen kann.
quelle
event.button === 0
dass kein Knopf geklickt wird, brillanter IEಠ_ಠ
Es scheint mir, dass eine geringfügige Anpassung der Antwort von TheVillageIdiot sauberer wäre:
BEARBEITEN: JQuery stellt ein
e.which
Attribut bereit , das 1, 2, 3 für Links-, Mittel- und Rechtsklick zurückgibt. Sie könnten also auch verwendenif (e.which == 3) { alert("right click"); }
Siehe auch: Antworten zu "Onclick-Ereignis mit mittlerem Klick auslösen"
quelle
event.which === 1
stellt sicher, dass es sich um einen Linksklick handelt (bei Verwendung von jQuery).Sie sollten aber auch über Modifikatortasten nachdenken: ctrlcmdshiftalt
Wenn Sie nur einfache, unveränderte Linksklicks abfangen möchten, können Sie Folgendes tun:
quelle
Wenn Sie nach "Better Javascript Mouse Events" suchen, die dies ermöglichen
Schauen Sie sich dieses browserübergreifende normale Javascript an, das die oben genannten Ereignisse auslöst und die Kopfschmerzen beseitigt. Kopieren Sie es einfach und fügen Sie es in den Kopf Ihres Skripts ein oder fügen Sie es in eine Datei in
<head>
Ihrem Dokument ein. Binden Sie dann Ihre Ereignisse. Lesen Sie dazu den nächsten Codeblock unten, der ein Beispiel für die Erfassung der Ereignisse und das Auslösen der ihnen zugewiesenen Funktionen zeigt. Dies funktioniert jedoch auch mit normaler Javascript-Bindung.Wenn Sie daran interessiert sind, dass es funktioniert, schauen Sie sich die jsFiddle an: https://jsfiddle.net/BNefn/
Besseres Beispiel für Mausklickereignisse (verwendet der Einfachheit halber jquery, aber das oben Gesagte funktioniert browserübergreifend und löst dieselben Ereignisnamen aus, die der IE vor den Namen verwendet).
Und für diejenigen, die die minimierte Version benötigen ...
quelle
quelle
quelle
Mit jquery können Sie verwenden
event object type
quelle
Es gibt auch eine Möglichkeit, dies ohne JQuery zu tun!
Schau dir das an:
quelle
quelle
Für diejenigen , die sich fragen, ob sie sollten oder nicht verwenden
event.which
in Vanille JS oder Angular : Es ist jetzt veraltet so lieber mitevent.buttons
statt.Hinweis: Mit dieser Methode und (Mousedown-) Ereignis:
und (mouseup) Ereignis gibt NICHT die gleichen Zahlen zurück, sondern 0 .
Quelle: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons
quelle
quelle