Come posso verificare se viene premuto un tasto durante l'evento click con jQuery?


105

Vorrei catturare un evento di clic con jQuery ed essere in grado di dire se un tasto è stato premuto contemporaneamente in modo da poter eseguire il fork all'interno della funzione di callback in base all'evento di pressione del tasto.

Per esempio:

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

È possibile o come si può farlo se è possibile?

Risposte:


174

È possibile rilevare facilmente i tasti Maiusc, Alt e Control dalle proprietà dell'evento;

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

Vedi quirksmode per ulteriori proprietà. Se vuoi rilevare altre chiavi, vedi la risposta di Cletus .


3
Non vedo che la proprietà sull'oggetto jQuery evento: api.jquery.com/category/events/event-object
Cletus

1
Ebbene, come dice la pagina, "La maggior parte delle proprietà dell'evento originale vengono copiate e normalizzate nel nuovo oggetto evento". ctrlKey, altKey ecc. fanno parte dello standard ecmascript (vedere il primo collegamento nella suddetta pagina api jquery), quindi (almeno in browser decenti) l'oggetto evento di solito ha anche quelle proprietà impostate.
kkyy

3
La modalità Quirks dice solo che questi sono definiti in un evento chiave .. nessuna menzione di un evento del mouse.

6
Puoi persino rilevare il tasto di comando di Mac OS X usando if (e.metaKey) alert('Command down'). Ecco un bell'articolo sugli eventi chiave in JS unixpapa.com/js/key.html
F Lekschas

48

È necessario monitorare separatamente lo stato della chiave utilizzando keydown()e 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;
  }
});

Vedere l' elenco dei codici chiave . Ora puoi verificare che:

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

6
Un lato negativo di questo metodo (non che io conosca un modo migliore) è che se stai rilevando il tasto ALT e l'utente ALT-Tabs su un'altra finestra, l'evento keyup non viene rilevato dal browser perché si è verificato su un'altra applicazione . Da quel punto, jquery pensa che la chiave sia inattiva, fino a quando non viene eseguita la chiave all'interno della tua app jquery. Questo importa solo con il tasto ALT, per quanto posso immaginare.
Flat Cat

1
Per Mac OS X sarebbe Cmd-Tab, ma penso che il principale valga ancora
murftown

1
Oppure Ctrl + Tab per cambiare la scheda del browser
Visto il


3

Senza rubare il tuono di @Arun Prasad , ecco uno snippet JS puro che ho ripetuto per interrompere l'azione predefinita, che altrimenti aprirebbe una nuova finestra se si preme CTL + clic.

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>

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.