Jak mogę sprawdzić, czy klawisz został naciśnięty podczas zdarzenia kliknięcia za pomocą jQuery?

105

Chciałbym złapać zdarzenie kliknięcia za pomocą jQuery i być w stanie stwierdzić, czy klawisz został naciśnięty w tym samym czasie, aby móc rozwidlić funkcję wywołania zwrotnego na podstawie zdarzenia naciśnięcia klawisza.

Na przykład:

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

Czy to w ogóle możliwe lub jak można to zrobić, jeśli jest to możliwe?

daniel smith
źródło

Odpowiedzi:

174

Możesz łatwo wykryć klawisze shift, alt i control we właściwościach zdarzenia;

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

Zobacz quirksmode, aby uzyskać więcej właściwości. Jeśli chcesz wykryć inne klucze, zobacz odpowiedź Cletusa .

kkyy
źródło
3
Nie widzę tej właściwości w obiekcie zdarzenia jQuery: api.jquery.com/category/events/event-object
cletus
1
Cóż, jak mówi strona: „Większość właściwości z pierwotnego zdarzenia jest kopiowana i normalizowana do nowego obiektu zdarzenia”. ctrlKey, altKey itp. są częścią standardu ecmascript (patrz pierwszy link na wspomnianej stronie jquery api), więc (przynajmniej w przyzwoitych przeglądarkach) obiekt zdarzenia zwykle ma również ustawione te właściwości.
kkyy
3
Tryb dziwactw mówi tylko, że są one zdefiniowane w kluczowym zdarzeniu ... bez wzmianki o zdarzeniu myszy.
6
Możesz nawet wykryć klawisz polecenia Mac OS X za pomocą if (e.metaKey) alert('Command down'). Oto fajny artykuł o kluczowych wydarzeniach w JS unixpapa.com/js/key.html
F Lekschas
48

Musisz oddzielnie śledzić stan klucza za pomocą keydown()i 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;
  }
});

Zobacz listę kluczowych kodów . Teraz możesz sprawdzić, czy:

$("button").click(function() {
  if (ctrlPressed) {
    // do something
  } else {
    // do something else
  }
});
cletus
źródło
6
Wadą tej metody (nie żebym znam lepszy sposób) jest to, że jeśli wykrywasz klawisz ALT, a użytkownik ALT-Tabs prowadzi do innego okna, zdarzenie keyup nie jest wykrywane przez przeglądarkę, ponieważ wystąpiło w innej aplikacji . Od tego momentu jquery uważa, że ​​klucz jest wyłączony, dopóki nie uruchomią klucza w aplikacji jquery. Ma to znaczenie tylko w przypadku klawisza ALT, o ile mogę sobie wyobrazić.
Flat Cat
1
W przypadku Mac OS X byłaby to Cmd-Tab, ale myślę, że
zasada
1
Lub Ctrl + Tab, aby zmienić kartę przeglądarki
Seeven
9

Mogłem go używać tylko z JavaScriptem

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

  function Show(event) {
            if (event.ctrlKey) { 
                 alert('Ctrl down');
            }
     }
Arun Prasad ES
źródło
1
Dalej zrobiłem małą korektę i długopis: codepen.io/vr_driver/pen/YRoRYO
vr_driver
3

Bez kradzieży gromu @Arun Prasad , oto czysty fragment kodu JS, który przerobiłem, aby zatrzymać domyślną akcję, która w przeciwnym razie otworzyłaby nowe okno po naciśnięciu CTL + kliknięcie.

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
źródło