Как я могу проверить, нажата ли клавиша во время события щелчка с помощью jQuery?

105

Я хотел бы поймать событие щелчка с помощью jQuery и иметь возможность определить, была ли нажата клавиша одновременно, чтобы я мог выполнить вилку в функции обратного вызова на основе события нажатия клавиши.

Например:

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

Возможно ли это вообще или как это можно сделать, если возможно?

Дэниел Смит
источник

Ответы:

174

Вы можете легко определить клавиши shift, alt и control из свойств события;

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

См. Quirksmode для получения дополнительных свойств. Если вы хотите обнаружить другие ключи, см . Ответ cletus .

ккйы
источник
3
Я не вижу этого свойства в объекте события jQuery: api.jquery.com/category/events/event-object
cletus
1
Как сказано на странице: «Большинство свойств из исходного события копируются и нормализуются в новый объект события». ctrlKey, altKey и т. д. являются частью стандарта ecmascript (см. первую ссылку на вышеупомянутой странице jquery api), поэтому (по крайней мере, в приличных браузерах) объект события обычно также имеет эти свойства.
kkyy
3
Режим Quirks только говорит, что они определены в ключевом событии .. Никакого упоминания о событии мыши.
6
Вы даже можете обнаружить командную клавишу Mac OS X, используя if (e.metaKey) alert('Command down'). Вот хорошая статья о ключевых событиях в JS unixpapa.com/js/key.html
F Lekschas
48

Вам необходимо отдельно отслеживать состояние ключа с помощью keydown()и 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;
  }
});

См. Список кодов клавиш . Теперь вы можете это проверить:

$("button").click(function() {
  if (ctrlPressed) {
    // do something
  } else {
    // do something else
  }
});
Cletus
источник
6
Одна нижняя сторона этого метода (не то, что я знаю лучший способ) заключается в том, что если вы обнаруживаете клавишу ALT и пользовательские ALT-Tabs переходят в другое окно, тогда событие нажатия клавиш не обнаруживается браузером, потому что оно произошло в другом приложении. . С этого момента jquery считает, что ключ не работает, пока они не введут ключ в ваше приложение jquery. Насколько я могу представить, это имеет значение только для клавиши ALT.
Flat Cat
1
Для Mac OS X это будет Cmd-Tab, но я думаю, что принцип все еще остается в
силе
1
Или Ctrl + Tab для изменения вкладки браузера
Seeven
9

Я смог использовать его только с JavaScript

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

  function Show(event) {
            if (event.ctrlKey) { 
                 alert('Ctrl down');
            }
     }
Арун Прасад ES
источник
1
В дополнение к этому я сделал небольшую корректировку и перо: codepen.io/vr_driver/pen/YRoRYO
vr_driver 06
3

Без кражи грома @Arun Prasad , вот чистый JS-фрагмент, который я переделал, чтобы остановить действие по умолчанию, которое в противном случае открыло бы новое окно при нажатии CTL + click.

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
источник