Comment puis-je vérifier si une touche est enfoncée pendant l'événement de clic avec jQuery?


105

Je voudrais attraper un événement de clic avec jQuery et être capable de dire si une touche a été enfoncée en même temps afin que je puisse bifurquer dans la fonction de rappel en fonction de l'événement keypress.

Par exemple:

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

Est-ce possible du tout ou comment le faire si c'est possible?

Réponses:


174

Vous pouvez facilement détecter les touches shift, alt et control à partir des propriétés de l'événement;

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

Voir quirksmode pour plus de propriétés. Si vous souhaitez détecter d'autres clés, consultez la réponse de cletus .


3
Je ne vois pas cette propriété sur l'objet jQuery Event: api.jquery.com/category/events/event-object
cletus

1
Eh bien, comme le dit la page, «la plupart des propriétés de l'événement d'origine sont copiées et normalisées dans le nouvel objet événement». ctrlKey, altKey etc. font partie de la norme ecmascript (voir le premier lien sur la page jquery api susmentionnée), donc (au moins dans les navigateurs décents) l'objet événement a généralement également ces propriétés définies.
kkyy

3
Le mode Quirks ne dit que ceux-ci sont définis dans un événement clé .. aucune mention sur un événement souris.

6
Vous pouvez même détecter la touche de commande de Mac OS X en utilisant if (e.metaKey) alert('Command down'). Voici un bel article sur les événements clés de JS unixpapa.com/js/key.html
F Lekschas

48

Vous devez suivre séparément l'état de la clé à l'aide de keydown()et 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;
  }
});

Voir la liste des codes clés . Maintenant, vous pouvez vérifier que:

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

6
Un inconvénient de cette méthode (pas que je connaisse un meilleur moyen) est que si vous détectez la touche ALT et l'utilisateur ALT-Tabs vers une autre fenêtre, l'événement keyup n'est pas détecté par le navigateur car il s'est produit sur une autre application . À partir de ce moment, jquery pense que la clé est enfoncée, jusqu'à ce qu'elle clique dans votre application jquery. Cela n'a d'importance qu'avec la touche ALT, pour autant que je puisse l'imaginer.
Flat Cat

1
Pour Mac OS X, ce serait Cmd-Tab, mais je pense que le principal tient toujours
murftown le

1
Ou Ctrl + Tab pour changer l'onglet du navigateur
Seeven


3

Sans voler le tonnerre de @Arun Prasad , voici un extrait de code JS pur que j'ai reformulé pour arrêter l'action par défaut, qui ouvrirait autrement une nouvelle fenêtre si CTL + clic est pressé.

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>

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.