web-dev-qa-db-fra.com

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

Je voudrais attraper un événement de clic avec jQuery et être capable de dire si une touche a été pressée en même temps afin que je puisse créer une fonction de rappel basée sur l'événement de frappe.

Par exemple: 

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

Est-ce possible ou comment peut-on le faire si c'est possible?

jqueryeventskeyboardclick
95
daniel smith

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 voulez détecter d'autres clés, voir réponse de Cletus .

165
kkyy

Vous devez suivre séparément l'état de la clé à l'aide de keydown() et de 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 de clé . Maintenant, vous pouvez vérifier que:

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

J'ai pu l'utiliser avec JavaScript seul

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

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

Sans voler Le tonnerre de @Arun Prasad , voici un extrait JS pur que j'ai modifié pour arrêter l'action par défaut, qui autrement ouvrirait une nouvelle fenêtre si vous appuyez sur CTL +.

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