试试

Question

为了提高某些庞大网络应用的性能，我创建了一个将其转换为单页应用的更新。只有JS / jQuery正在使用中;到目前为止，引入Angular，React，Meteor等似乎没有用。然而，beta测试已经发现了一个问题，即（duh）有时用户会想要在新的选项卡/窗口中打开一些东西。有问题的交互元素目前是没有href属性的锚点，因此目前无法在新标签页中打开。

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

我考虑在互动元素旁边放置“在新标签中打开”复选框，我考虑了一些其他需要人们学习新的惯用交互模式的方法。 糟糕的主意。

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

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

更新

如果它在将来帮助任何人，下面是我开发的。感谢@Kiko Garcia;我没有想到可以检测到使用了哪个鼠标按钮。测试了Firefox 54，Chrome 57，Edge，IE 11（全部在Windows 10上）和Safari for iOS10以及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更改。

你可以这样做：

左键单击：更改location.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.
});

试试

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

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

更新

1 个答案:

试试