Question

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

我想保留用户关于如何打开链接的意图。例如，如果Mac用户apple +点击链接，则应在新选项卡中打开它。但是如果用户想要在当前窗口中打开一个链接，我想避免发出新的HTTP请求，只需使用DOM操作来显示新内容。

这是我尝试过的（JSFiddle）：

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

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

它的行为与正常的左键单击和上下文菜单操作一样，但不适用于带有修饰键的点击。我可以检查某些修改键是否被保留，但这看起来很脆弱。

Twitter的网站行为与我想要的相似 - 当您点击用户名时，它通常是一个AJAX请求，但如果您点击持有的元键，则会获得一个新标签。< / p>

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

更新

我查看了GitHub的代码，该代码也具有我之后的行为，它会检查某些密钥是否被保留。所以我接受克里斯的回答，因为似乎不太可能有更好的选择。

$(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属性。如果其中一个为真，则保持键控制，移位或元（Apple命令）键，您应该允许默认链接操作继续。否则，您使用preventDefault来停止链接操作并使用javascript处理它。

将target="_blank"添加到您的锚标记，因此默认链接行为是打开一个新标签。否则它将在当前页面的顶部打开（可能需要）。

这是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;
}

小提琴：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

Answer 2

您也可以使用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>

如何检测用户是否尝试在新标签中打开链接？

更新

2 个答案: