如何使用jQuery单击事件期间检查是否按下了键？

105

我想用jQuery捕获click事件，并能够判断是否同时按下了一个键，因此我可以基于keypress事件在回调函数中派生。

例如：

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

这完全有可能吗，或者如果可能的话怎么办？

— 丹尼尔·史密斯
source

174

您可以从事件属性中轻松检测出shift键，alt键和控制键。

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

有关更多属性，请参见quirksmode。如果要检测其他键，请参阅cletus的答案。

— ky
source

3

我没有在jQuery Event对象上看到该属性：api.jquery.com/category/events/event-object

— cletus，2010年

1

就像页面上说的那样，“原始事件中的大多数属性都将被复制并标准化为新事件对象。” ctrlKey，altKey等是ecmascript标准的一部分（请参见上述jquery api页面上的第一个链接），因此（至少在体面的浏览器中）事件对象通常也设置了那些属性。

— kkyy

3

“怪癖”模式仅表示这些是在按键事件中定义的。没有提及鼠标事件。

6

您甚至可以使用来检测Mac OS X的命令键if (e.metaKey) alert('Command down')。这是一篇关于JS中关键事件的好文章unixpapa.com/js/key.html

— F Lekschas 2015年

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
  }
});

— 克莱图斯
source

6

此方法的一个缺点（不是我知道更好的方法）是，如果您正在检测ALT键，并且用户ALT-Tab转到了另一个窗口，则浏览器不会检测到keyup事件，因为它发生在另一个应用程序上。从那时起，jquery便认为该键已按下，直到他们在您的jquery应用程序中键入了键。据我所能想象，这仅与ALT键有关。

— Flat Cat

1

对于Mac OS X，它将是Cmd-Tab，但我认为原则仍然成立

— murftown

1

或按Ctrl + Tab更改浏览器的标签

— Seeven

9

我可以单独使用它

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

  function Show(event) {
            if (event.ctrlKey) { 
                 alert('Ctrl down');
            }
     }

— 阿伦·普拉萨德（Arun Prasad ES）
source

1

除此之外，我做了一点调整和一支笔：codepen.io/vr_driver/pen/YRoRYO

— vr_driver

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
source