Как я могу проверить, нажата ли клавиша во время события click с помощью jQuery? - PullRequest
99 голосов
/ 15 марта 2010

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

Например:

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

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

Ответы [ 4 ]

168 голосов
/ 15 марта 2010

Вы можете легко обнаружить клавиши Shift, Alt и Control из свойств события;

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

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

46 голосов
/ 15 марта 2010

Вам нужно отдельно отслеживать статус ключа, используя 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
  }
});
8 голосов
/ 16 июля 2016

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

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

  function Show(event) {
            if (event.ctrlKey) { 
                 alert('Ctrl down');
            }
     }
3 голосов
/ 07 декабря 2018

Без кражи @ гром Аруна Прасада , вот чистый фрагмент JS, который я перефразировал, чтобы остановить действие по умолчанию, которое в противном случае открывало бы новое окно, если нажать 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>
...