wake-up-neo.com

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

Ich möchte ein Klickereignis mit jQuery abfangen und in der Lage sein, zu sagen, ob eine Taste gleichzeitig gedrückt wurde, sodass ich mich innerhalb der Rückruffunktion basierend auf dem Keypress-Ereignis verzweigen kann.

Zum Beispiel: 

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

jqueryeventskeyboardclick
95
daniel smith

Sie können die Shift-, Alt- und Control-Tasten leicht anhand der Ereigniseigenschaften erkennen.

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

Siehe quirksmode für weitere Eigenschaften. Wenn Sie andere Schlüssel erkennen möchten, lesen Sie die Antwort in cletus .

165
kkyy

Sie müssen den Tastenstatus mit keydown() und keyup() separat verfolgen:

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 Liste der Tastencodes . Jetzt können Sie das überprüfen:

$("button").click(function() {
  if (ctrlPressed) {
    // do something
  } else {
    // do something else
  }
});
44
cletus

Ich konnte es allein mit JavaScript verwenden

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

  function Show(event) {
            if (event.ctrlKey) { 
                 alert('Ctrl down');
            }
     }
5
Arun Prasad E S

Ohne zu stehlen @Arun Prasads Donner , hier ist ein reines JS-Snippet, das ich erneut gewaschen habe, um die Standardaktion zu beenden, die andernfalls ein neues Fenster öffnet, wenn CTL + Klick 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>

0
vr_driver