如何在使用jQuery的click事件期间检查是否按下了某个键?

dan*_*ith 102 keyboard jquery events click

我想用jQuery捕获一个click事件,并能够判断是否同时按下了一个键,这样我就可以根据keypress事件在回调函数中进行分支.

例如:

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

这有可能吗?如果可能的话怎么办呢?

kky*_*kyy 171

您可以从事件属性轻松检测shift,alt和control键;

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

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

  • 您甚至可以使用`if(e.metaKey)alert('Command down')`来检测Mac OS X的命令键.这是一篇关于JS http://unixpapa.com/js/key.html中关键事件的好文章 (6认同)
  • 我没有在jQuery Event对象上看到该属性:http://api.jquery.com/category/events/event-object/ (3认同)
  • Quirks模式只表示这些是在一个关键事件中定义的*没有提到鼠标事件. (3认同)

cle*_*tus 47

您需要使用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;
  }
});
Run Code Online (Sandbox Code Playgroud)

请参阅密钥代码列表.现在您可以检查:

$("button").click(function() {
  if (ctrlPressed) {
    // do something
  } else {
    // do something else
  }
});
Run Code Online (Sandbox Code Playgroud)

  • 这个方法的一个缺点(不是我知道更好的方法)是如果你检测到ALT键,并且用户ALT-Tabs到另一个窗口,那么浏览器不会检测到keyup事件,因为它发生在另一个应用程序上.从那时起,jquery认为关键是关闭,直到他们在你的jquery应用程序中键入.就我所能想象的那样,这只对ALT键很重要. (6认同)

Aru*_*E S 9

我只能用JavaScript来使用它

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

  function Show(event) {
            if (event.ctrlKey) { 
                 alert('Ctrl down');
            }
     }
Run Code Online (Sandbox Code Playgroud)


vr_*_*ver 5

在不窃取@Arun Prasad 的雷霆的情况下,这里是我重新哈希的纯 JS 片段,以停止默认操作,否则如果按下 CTL+click ,则会打开一个新窗口。

function Show(event) 
{
  if (event.ctrlKey) 
  {
    alert('Ctrl held down which clicked');
  } 
  else 
  {
    alert('Ctrl NOT pressed');
  }
  return false
}
Run Code Online (Sandbox Code Playgroud)
<p>Hold down CTL on the link to get a different message</p>

<a href="" onclick="return Show(event)">click me</a>
Run Code Online (Sandbox Code Playgroud)