javascript - 防止在同一选项卡中打开链接，但允许在新选项卡中打开

Question

为了提高一些大型网络应用程序的性能，我创建了一个更新，将它们转换为单页应用程序。仅使用 JS/jQuery；到目前为止，引入 Angular、React、Meteor 等似乎没什么用。然而，beta 测试揭示了一个问题，即(废话)有时用户会想要在新选项卡/窗口中打开某些内容。相关交互式元素目前是没有 href 属性的 anchor ，因此目前无法在新选项卡中打开。

我的理解是，如果我将 a 与 href 和 preventDefault() 一起使用，用户仍然无法在新选项卡中打开。

我考虑在交互元素旁边放置“在新选项卡中打开”复选框，并且考虑了一些其他方法，这些方法需要人们学习新的、惯用的交互模式。 坏主意。

现在，我想尝试使用 onbeforeunload 事件处理程序来防止更改当前窗口的位置，而是影响对当前屏幕的所需更改。我相信这不会阻止在新选项卡中打开，因为在新选项卡中打开不会触发卸载事件。

我不是第一个尝试解决这个问题的人，但我也找不到任何相关信息。任何人都知道如何防止在同一选项卡中打开，同时允许在新选项卡中打开，同时不强制人们学习新的交互模式？有人有理由相信使用 onbeforeunload 事件处理程序不允许我实现这一目标吗？

更新

如果它对将来的任何人有帮助，下面是我开发的内容。感谢@Kiko Garcia；我没有想到人们可以检测到使用的是哪个鼠标按钮。在 Firefox 54、Chrome 57、Edge、IE 11(全部在 Windows 10 上)、iOS10 的 Safari 和 Android 7 的 Android 浏览器上进行了测试。(下周将在 Mac 上进行测试，但假设目前情况良好。)

// track whether or not the Control key is being pressed
var controlKeyIsPressed = 0;

$(document).keydown(function(keyDownEvent) {
    if(keyDownEvent.which == "17") {
        controlKeyIsPressed = 1;
    }
});

$(document).keyup(function(){
    controlKeyIsPressed = 0;
});

// on clicking anchors of the specified type
$("a.some-class").on("click", function(clickEvent) {
    // left click only
    if (clickEvent.which == 1 && controlKeyIsPressed == 0) {
        // prevent default behaviour
        clickEvent.preventDefault();
        // perform desired changes on this screen
    // middle click
    } else if (clickEvent.which == 2) {
        // prevent default behaviour because behaviour seems to be inconsistent
        clickEvent.preventDefault();
    }
});

Answer 1

就像 this answer says您可以为不同的鼠标事件提供不同的操作。当然，例如，这可以是 window.open() 或 location.href 更改。

有了它，你可以做类似的事情:

• 左键单击:更改位置.href
• 中键单击:打开新窗口
• 右键单击:打开自定义菜单

$(document).mousedown(function(e){
switch(e.which)
{
    case 1:
        //left Click
    break;
    case 2:
        //middle Click
    break;
    case 3:
        //right Click
    break;
}
return true;// to allow the browser to know that we handled it.
});

尝试一下

请注意，我刚刚粘贴了答案的代码。您应该适应您的标记名和可用性