Question

我可以在标签中选择我的网络应用程序。

<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）
control +鼠标左键单击（windows / linux）

Answer 1

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

幸运的是，event.ctrlKey在这些情况下确实评估为true。此外，您可能需要考虑事件处理程序中的shift +点击。

因此，您的跨平台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

使用e.metaKey在Windows上的工作方式不同，因此要检测Windows，您可以使用导航器对象查看用户是否单击了ctrl键（打开新选项卡的默认方式）。

$('ul#tabs li a').click(function(a){
  var href = $(this).attr('href');
  // check if user clicked with command key (for mac) or ctrl key (for windows)
  if(a.metaKey || (navigator.platform.toUpperCase().indexOf('WIN')!==-1 && a.ctrlKey)) {
    window.open(href,'_blank');
  } else {
    $('#content').fadeOut('fast', function(){
        window.location = href;
    });
  }
});

Answer 4

根据MDN，event.metaKey在Mac键盘上为命令键返回true，在Windows键盘上为 windows键返回true。 Windows键盘。

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

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

Answer 5

我知道你想使用jQuery，但我会尝试使用Keymaster：

https://github.com/madrobby/keymaster

这真的很棒，我正在将它用于我正在进行的项目，这很棒。

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

5 个答案: