Como posso verificar se uma tecla é pressionada durante o evento de clique com jQuery?

105

Gostaria de capturar um evento de clique com jQuery e ser capaz de dizer se uma tecla foi pressionada ao mesmo tempo para que eu possa bifurcar na função de retorno de chamada com base no evento de pressionamento de tecla.

Por exemplo:

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

Isso é possível ou como pode ser feito, se for possível?

Daniel Smith
fonte

Respostas:

174

Você pode detectar facilmente as teclas shift, alt e control nas propriedades do evento;

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

Veja quirksmode para mais propriedades. Se você quiser detectar outras chaves, consulte a resposta de cletus .

kkyy
fonte
3
Não vejo essa propriedade no objeto jQuery Event: api.jquery.com/category/events/event-object
cletus
1
Bem, como a página diz, "A maioria das propriedades do evento original são copiadas e normalizadas para o novo objeto de evento." ctrlKey, altKey etc. fazem parte do padrão ecmascript (consulte o primeiro link na página da API jquery mencionada anteriormente), portanto (pelo menos em navegadores decentes) o objeto de evento geralmente também tem essas propriedades definidas.
kkyy
3
O modo peculiares apenas diz que eles são definidos em um evento chave ... nenhuma menção sobre um evento de mouse.
6
Você pode até detectar a tecla de comando do Mac OS X usando if (e.metaKey) alert('Command down'). Aqui está um bom artigo sobre os principais eventos em JS unixpapa.com/js/key.html
F Lekschas
48

Você precisa rastrear separadamente o status da chave usando 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;
  }
});

Veja a lista de códigos de chave . Agora você pode verificar se:

$("button").click(function() {
  if (ctrlPressed) {
    // do something
  } else {
    // do something else
  }
});
cletus
fonte
6
Um lado negativo deste método (não que eu conheça uma maneira melhor) é se você estiver detectando a tecla ALT e o usuário ALT-Tabs para outra janela, o evento keyup não é detectado pelo navegador porque ocorreu em outro aplicativo . A partir desse ponto, o jquery pensa que a chave está inativa, até que eles entrem no seu aplicativo jquery. Isso só importa com a tecla ALT, tanto quanto posso imaginar.
Flat Cat
1
Para Mac OS X, seria o Cmd-Tab, mas acho que o principal ainda se mantém
murftown
1
Ou Ctrl + Tab para alterar a guia do navegador
Seeven
9

Consegui usá-lo apenas com JavaScript

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

  function Show(event) {
            if (event.ctrlKey) { 
                 alert('Ctrl down');
            }
     }
Arun Prasad ES
fonte
1
Além disso, fiz um pequeno ajuste e uma caneta: codepen.io/vr_driver/pen/YRoRYO
vr_driver
3

Sem roubar o trovão de @Arun Prasad , aqui está um trecho de JS puro que refiz para interromper a ação padrão, que de outra forma abriria uma nova janela se CTL + clique for pressionado.

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
fonte