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

Question

I'm writing a website in which all content is stored in the JavaScript environment, so it should be possible to navigate between "pages" without additional HTTP requests.我正在编写一个网站，其中所有内容都存储在 JavaScript 环境中，因此应该可以在“页面”之间导航而无需额外的 HTTP 请求。

I want to preserve the user's intent with respect to how links are opened, though.不过，我想保留用户关于如何打开链接的意图。 If a Mac user apple+clicks a link, for example, it should be opened in a new tab.例如，如果 Mac 用户 apple+ 单击链接，则应在新选项卡中打开它。 But if the user wants to open a link in the current window, I want to avoid making a new HTTP request, and just use DOM manipulation to show the new content.但是如果用户想在当前窗口打开一个链接，我想避免发出新的HTTP请求，而只是使用DOM操作来显示新内容。

Here's what I tried ( JSFiddle ):这是我尝试过的（ JSFiddle ）：

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

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

It behaves as desired for normal left clicks, and for context menu actions, but not for clicks with a modifier key.对于正常的左键单击和上下文菜单操作，它的行为符合要求，但对于使用修饰键的单击则不然。 I could check whether certain modifier keys are held, but that seems fragile.我可以检查是否保留了某些修饰键，但这似乎很脆弱。

Twitter's website has behavior similar to what I want - when you click a username, it's normally an AJAX request, but if you click with a meta key held, you get a new tab. Twitter 网站的行为与我想要的类似 - 当您单击用户名时，它通常是一个 AJAX 请求，但如果您在按住元键的情况下单击，您将获得一个新选项卡。

I'd prefer a plain JavaScript solution without libraries, unless this requires a bunch of platform-specific logic.我更喜欢没有库的纯 JavaScript 解决方案，除非这需要一堆特定于平台的逻辑。

Update更新

I took a look at GitHub's code, which also has the behavior I'm after, and it does check for certain keys being held.我查看了 GitHub 的代码，它也有我所追求的行为，它确实检查了某些键是否被持有。 So I'm accepting Chris's answer , since it seems unlikely that there's a better alternative.所以我接受克里斯的回答，因为似乎不太可能有更好的选择。

$(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

You can examine the ctrlKey , shiftKey , and metaKey properties of the event object.您可以检查事件对象的ctrlKey 、 shiftKey和metaKey属性。 If either is true, the key control, shift, or meta (Apple's command) key is being held and you should allow the default link action to proceed.如果任一为真，则表示正在按住键控制、移位或元（Apple 的命令）键，您应该允许默认链接操作继续进行。 Otherwise, you use preventDefault to stop the link action and handle it with javascript instead.否则，您可以使用preventDefault停止链接操作并使用 javascript 处理它。

Add target="_blank" to your anchor markup, so the default link behavior is opening a new tab.将target="_blank"添加到您的锚标记，因此默认链接行为是打开一个新选项卡。 Otherwise it will open on top of the current page (that may be desired).否则它将在当前页面的顶部打开（可能需要）。

Here's the javascript, either way:这是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/小提琴： http : //jsfiddle.net/6byrt0wu/

Documentation文档

MDN Events - https://developer.mozilla.org/en-US/docs/Web/API/Event 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.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.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 Event.metaKey - https://developer.mozilla.org/en-US/docs/Web/API/event.metaKey
a tag - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a a标签 - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

Answer 2

You can detect that using onblur as well您也可以使用 onblur 检测到

<html>
<head>
<script>
function newTabaction() {
  document.getElementById("demo").innerHTML = "New tab opened!<br><br>refesh this page to recheck ";
}
window.onblur = newTabaction;
</script>
</head>
<body>
<div id="demo">
Open a new tab and then check this page
</div>
</body>
</html>

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

问题描述

Update更新

2 个解决方案

解决方案1
40 已采纳 2013-11-20 04:42:08

解决方案2
0 2020-07-03 08:49:34

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

问题描述

Update更新

2 个解决方案

解决方案1 40 已采纳 2013-11-20 04:42:08

解决方案2 0 2020-07-03 08:49:34

解决方案1
40 已采纳 2013-11-20 04:42:08

解决方案2
0 2020-07-03 08:49:34