javascript - 如何检测用户是否尝试在新选项卡中打开链接？

Question

我正在编写一个网站，其中所有内容都存储在 JavaScript 环境中，因此应该可以在“页面”之间导航，而无需额外的 HTTP 请求。

不过，我想保留用户关于如何打开链接的意图。例如，如果 Mac 用户通过苹果键单击链接，则应在新选项卡中打开该链接。但是，如果用户想在当前窗口中打开链接，我想避免发出新的 HTTP 请求，而只需使用 DOM 操作来显示新内容。

这是我尝试过的(JSFiddle):

<a href="http://yahoo.com" id="mylink">Yahoo!</a>

document.getElementById("mylink").onclick = function() {
    alert("clicked");
    return false;
}

它的行为符合正常左键单击和上下文菜单操作的要求，但不适用于使用修饰键的单击。我可以检查是否按住了某些修饰键，但这似乎很脆弱。

Twitter 网站的行为与我想要的类似 - 当您单击用户名时，通常是 AJAX 请求，但如果您按住元键进行单击，则会看到一个新选项卡。

我更喜欢没有库的纯 JavaScript 解决方案，除非这需要一堆特定于平台的逻辑。

更新

我查看了 GitHub 的代码，它也具有我想要的行为，并且它确实检查了所持有的某些 key 。所以我接受克里斯的回答，因为似乎不太可能有更好的选择。

$(document).on("click", ".js-directory-link", function (t) {
    return 2 === t.which || t.metaKey || t.ctrlKey ? void 0 : ($(this).closest("tr").addClass("is-loading"), $(document.body).addClass("disables-context-loader"))
}

Answer 1

您可以检查事件对象的 ctrlKey、shiftKey 和 metaKey 属性。如果任一情况为真，则表示正在按住控制键、Shift 或元(Apple 的命令)键，并且您应该允许继续执行默认链接操作。否则，您可以使用 preventDefault 来停止链接操作并使用 JavaScript 进行处理。

将 target="_blank" 添加到您的 anchor 标记中，因此默认链接行为是打开一个新选项卡。否则它将在当前页面的顶部打开(这可能是需要的)。

这是 JavaScript，无论哪种方式:

document.getElementById("mylink").onclick = function(evnt) {
    if (
        evnt.ctrlKey || 
        evnt.shiftKey || 
        evnt.metaKey || // apple
        (evnt.button && evnt.button == 1) // middle click, >IE9 + everyone else
    ){
        return;
    }
    evnt.preventDefault();

    alert("clicked");
    return false;
}

fiddle :http://jsfiddle.net/6byrt0wu/

文档

• MDN 事件 - https://developer.mozilla.org/en-US/docs/Web/API/Event
• Event.ctrlKey - https://developer.mozilla.org/en-US/docs/Web/API/event.ctrlKey
• Event.shiftKey - https://developer.mozilla.org/en-US/docs/Web/API/event.shiftKey
• Event.metaKey - https://developer.mozilla.org/en-US/docs/Web/API/event.metaKey
• a 标签 - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a