Wie kann ich mit jQuery überprüfen, ob während des Klickereignisses eine Taste gedrückt wird?

105

Ich möchte ein Klickereignis mit jQuery abfangen und feststellen können, ob gleichzeitig eine Taste gedrückt wurde, damit ich die Rückruffunktion basierend auf dem Tastendruckereignis aufteilen kann.

Beispielsweise:

$("button").click(function() {
    if([KEYPRESSED WHILE CLICKED]) {
        // Do something...
    } else {
        // Do something different...
    }
});

Ist das überhaupt möglich oder wie kann es gemacht werden, wenn es möglich ist?

Daniel Smith
quelle

Antworten:

174

Sie können die Umschalt-, Alt- und Steuertasten leicht an den Ereigniseigenschaften erkennen.

$("button").click(function(evt) {
  if (evt.ctrlKey)
    alert('Ctrl down');
  if (evt.altKey)
    alert('Alt down');
  // ...
});

Weitere Eigenschaften finden Sie im Quirksmode . Wenn Sie andere Schlüssel erkennen möchten , lesen Sie die Antwort von cletus .

kkyy
quelle
3
Ich sehe diese Eigenschaft nicht auf dem jQuery Event-Objekt: api.jquery.com/category/events/event-object
cletus
1
Nun, wie auf der Seite steht: "Die meisten Eigenschaften des ursprünglichen Ereignisses werden kopiert und auf das neue Ereignisobjekt normalisiert." ctrlKey, altKey usw. sind Teil des Ecmascript-Standards (siehe den ersten Link auf der oben genannten jquery-API-Seite), sodass für das Ereignisobjekt (zumindest in anständigen Browsern) normalerweise auch diese Eigenschaften festgelegt sind.
kkyy
3
Der Mackenmodus sagt nur, dass diese in einem Schlüsselereignis definiert sind . Keine Erwähnung eines Mausereignisses.
6
Sie können die Befehlstaste von Mac OS X sogar mit erkennen if (e.metaKey) alert('Command down'). Hier ist ein schöner Artikel über wichtige Ereignisse in JS unixpapa.com/js/key.html
F Lekschas
48

Sie müssen den Schlüsselstatus separat verfolgen keydown()und Folgendes verwenden keyup():

var ctrlPressed = false;
$(window).keydown(function(evt) {
  if (evt.which == 17) { // ctrl
    ctrlPressed = true;
  }
}).keyup(function(evt) {
  if (evt.which == 17) { // ctrl
    ctrlPressed = false;
  }
});

Siehe die Liste der Schlüsselcodes . Jetzt können Sie Folgendes überprüfen:

$("button").click(function() {
  if (ctrlPressed) {
    // do something
  } else {
    // do something else
  }
});
Cletus
quelle
6
Ein Nachteil dieser Methode (nicht, dass ich einen besseren Weg kenne) ist, dass wenn Sie den ALT-Schlüssel erkennen und der Benutzer ALT-Tabs zu einem anderen Fenster führt, das Keyup-Ereignis vom Browser nicht erkannt wird, weil es in einer anderen Anwendung aufgetreten ist . Ab diesem Zeitpunkt glaubt jquery, dass der Schlüssel nicht verfügbar ist, bis er in Ihrer jquery-App eingegeben wird. Dies ist nur mit der ALT-Taste von Bedeutung, soweit ich mir vorstellen kann.
Flat Cat
1
Für Mac OS X wäre das Cmd-Tab, aber ich denke, der Principal hält immer noch
Murftown
1
Oder Strg + Tab zum Ändern des Tabs des Browsers
Seeven
9

Ich konnte es nur mit JavaScript verwenden

 <a  href="" onclick="return Show(event)"></a>

  function Show(event) {
            if (event.ctrlKey) { 
                 alert('Ctrl down');
            }
     }
Arun Prasad ES
quelle
1
Außerdem habe ich eine kleine Anpassung und einen Stift vorgenommen: codepen.io/vr_driver/pen/YRoRYO
vr_driver
3

Ohne @Arun Prasads Donner zu stehlen , ist hier ein reines JS-Snippet, das ich erneut aufbereitet habe, um die Standardaktion zu stoppen. Andernfalls würde ein neues Fenster geöffnet, wenn CTL + Klicken gedrückt wird.

function Show(event) 
{
  if (event.ctrlKey) 
  {
    alert('Ctrl held down which clicked');
  } 
  else 
  {
    alert('Ctrl NOT pressed');
  }
  return false
}
<p>Hold down CTL on the link to get a different message</p>

<a href="" onclick="return Show(event)">click me</a>

vr_driver
quelle