jQuery：检测 cmd+click/control+click答案

【问题标题】：jQuery: detecting cmd+click / control+clickjQuery：检测 cmd+click/control+click
【发布时间】：2011-11-07 06:53:42
【问题描述】：

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

【问题讨论】：

有一个小模块可以自动过滤掉这些事件。 filter-altered-clicks。只需用它包装您的侦听器函数，您就不必手动检查侦听器中的每个键。

标签： jquery keyboard click mouse detection

【解决方案1】：

在您的点击函数中，e.metaKey 的计算结果是否为真？如果是这样，那就是你。

【讨论】：

According to MDN, metaKey 指的是 Windows 上的 Windows 键，而不是控制键。

【解决方案2】：

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

https://github.com/madrobby/keymaster

真的很棒，我正在将它用于我正在从事的项目中，它很棒。

【讨论】：

嗨，我正在将 Keymaster 用于其他功能，因为我读到它不适用于鼠标事件。

【解决方案3】：

很遗憾，当在单击时按住 ctrl 键时，event.metaKey 在 Windows 上不会评估为 true。

幸运的是，event.ctrlKey 在这些情况下确实评估为 true。此外，您可能需要考虑在事件处理程序中使用 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;
      });
    }
  }
});

【讨论】：

很好的答案，虽然shift 不是问题的一部分。
Shift 似乎有点矫枉过正，但这在 mac 和 windows 上起到了作用

【解决方案4】：

使用 e.metaKey 在 Windows 上的工作方式不同，因此要检测 Windows，您可以使用 navigator 对象并查看用户是否在单击 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;
    });
  }
});

【讨论】：

【解决方案5】：

根据 MDN，对于 Mac 键盘上的 command 键，event.metaKey 返回 true，而对于 Windows 键盘上的 windows 键，则返回 true。

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

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

【讨论】：