jQuery:检测cmd +单击/控制+单击

Question

我在选项卡中有我的Web应用程序选项.

<ul id="tabs">
    <li><a href="a.php">aaa</a></li>
    <li><a href="b.php">bbb</a></li>
    <li><a href="c.php">ccc</a></li>
    <li><a href="d.php">ddd</a></li>
    <li><a href="e.php">eee</a></li>
</ul>

当用户点击任何选项卡(在同一窗口中)时,我会使用此代码获得淡出效果,然后自动重定向:

$('ul#tabs li a').click(function(e){
    if(e.which == 1) {
        var link = $(this).attr('href');
        $('#content').fadeOut('fast',function(){
            window.location = link;
        });
    }
});

它工作得很好,因为它忽略了鼠标中键单击(在新选项卡中打开选项时,不应触发效果).问题是,如果我用键盘+鼠标组合打开选项卡,而不是打开一个新选项卡,它会触发整个效果/重定向代码.

那么,我怎么能用jQuery检测到这个:

• cmd +鼠标左键单击(mac)
• 控制+鼠标左键单击(windows/linux)

Answer 1

不幸的是,event.metaKey当点击时按住ctrl键时,在Windows上评估为true.

幸运的是,event.ctrlKey在这些情况下评估为真.此外,您可能需要考虑事件处理程序中的shift + clicks.

因此,您的跨平台jquery风味的JavaScript代码看起来像:

$('ul#tabs li a').on('click', function(e) {
    var link = $(this).attr('href');

    // Check "open in new window/tab" key modifiers
    if (e.shiftKey || e.ctrlKey || e.metaKey) {
      window.open(link, '_blank');
    } else {
      $('#content').fadeOut('fast',function(){
        window.location = link;
      });
    }
  }
});

Answer 2

在你的点击功能中,e.metaKey评估为真吗？如果是这样,那就是你.

Answer 3

根据MDN，该event.metaKey返回true的命令键在Mac键盘和回报true的Windows键在Windows键盘。

因此，您还应该检查该ctrlKey属性以检测控制键。

if (event.ctrlKey || event.metaKey) {
    //ctrlKey to detect ctrl + click
    //metaKey to detect command + click on MacOS
    yourCommandKeyFunction();
} else {
    yourNormalFunction();
}