jQuery:检测cmd+单击/control+单击

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)
• Ctrl + 鼠标左键单击 (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;
      });
    }
  }
});