按住Command键单击不会打开新选项卡，但是单击鼠标中键会执行 [英] Command-click doesn't open a new tab, but middle-click does

问题描述

在我的网站上，这是一个使用Sammy.js和jQuery的单页JS站点，当我用鼠标中键单击链接时，链接将在新选项卡中打开。但是，当我在Mac上命令单击时，它没有。这种情况在Firefox和Chrome中都会发生，因此我认为它必须以某种方式符合规范。

On my website, which is a one-page JS site using Sammy.js and jQuery, when I middle-click a link with a mouse, the link opens in a new tab. But when I command-click on a Mac, it doesn't. This happens in both Firefox and Chrome, so I assume it must be according to spec in some way.

这在Macbook Air上发生（因此触控板+命令按钮）。大多数网站工作得很好，命令点击与正常的中间点击相同。

This happens on a Macbook Air (so trackpad + command button). Most sites work just fine though, with command-click being identical to normal middle-click.

自己尝试一下： https://circleci.com 。在关于，主页和联系人之间按住Command键并且您应该遇到问题 - 它们不会在新选项卡中打开。

Try it out yourself: https://circleci.com. Command-click between "about", "home" and "contact" and you should experience the problem - they don't open in new tabs.

推荐答案

在这里猜测，但稍后会从Mac确认。这已被证实可以在Mac上运行。

Speculating here, but will confirm later from a Mac. This has been confirmed to be working on a Mac.

Win ctrl +单击或Mac命令+单击被普通点击监听器拾取，就像点击任意其他修改键（alt +单击，切换+单击等）。

Win ctrl+click or a Mac command+click gets picked up by a "normal" click listener, just like a click with any other modifier key (alt+click, shift+click etc).

由于在Mac 上按住ctrl +单击被解释为右键单击操作系统级别，因此特别令人困惑。另一方面，按住Command键，不被解释为中间点击，而是浏览器首选项。

This is particularly confusing since a ctrl+click on a Mac gets interpreted as a right-click on OS level. Command-click, on the other hand, is not interpreted as a middle-click but rather is a browser preference.

假设你这样做没有专门依赖于修改后的点击的现场功能，从点击侦听器中排除此类事件是合适的，而是允许它们冒泡以由浏览器本地处理。鉴于处于类似情况的人的经验，应该能够将以下内容添加到单击处理程序（可能是Brilliand指出的库级别的委托）：

Assuming that you do not have in-site functionality that specifically relies on modified clicks, it would be appropriate to exclude such events from click listeners, and instead allow for them to bubble up to be natively handled by the browser. Given the experience of someone in the similar situation, you should be able to add the following to click handlers (likely a delegate on library level as pointed out by Brilliand):

if (e.metaKey || e.ctrlKey) return;

在处理程序的开头添加 e 引用当前点击事件，这应绕过任何后续 e.preventDefault（）;

When added at the beginning of the handler with e referring to a current click event, this should circumvent any following e.preventDefault();

它确实有效！在这个相当简约的小提琴中，我能够识别命令点击或控制点击的时间，以便避免执行其余的点击处理程序，其中包括ajax-fetching内容和 e.preventDefault（）; 。这允许在Mac上按预期处理命令单击，即在新选项卡中打开链接。

It actually works! In this rather minimalistic fiddle, I am able to recognize when command-clicked or control-clicked, so as to avoid executing the rest of the click handler which includes ajax-fetching the content and e.preventDefault();. This allows for a command-click to be handled "as intended" on a Mac, i.e. opening the link in a new tab.

考虑到这一发现，这些行现在应该是

With this finding in mind, these lines should now read

if (e.isDefaultPrevented() || e.metaKey || e.ctrlKey) {
    return;
}

这篇关于按住Command键单击不会打开新选项卡，但是单击鼠标中键会执行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！