Question

我正在开发一个网站，通过一些链接做一些有点奇怪的事情。

当用户点击链接时，链接旁边会显示类似this的指示符GIF，并且链接本身已被禁用。然后导航到该页面。这是因为担心不耐烦的用户可能会在没有立即加载时重复点击链接，从而给我们的服务器带来额外的负担。

以下是我们如何做到这一点：

<a id="link1" href="/target_page"
   onclick="var link = document.getElementById('link1');
            var loc = link.href;
            link.removeAttribute('href');
            link.setAttribute('onclick', 'return false;');
            document.getElementById('link1_img').style.display='';
            window.location = loc;">
  Link Text
  <img id="link1_img" src="/images/indicator.gif" style="display:none;" />
</a>

这是问题所在。虽然如果用户正常点击链接，或者右键单击它并在上下文菜单中的新窗口或选项卡中打开它，这会产生预期的行为，但如果用户单击鼠标中键或Ctrl +，则它并不总能正常工作点击链接。

在这种情况下，所需的行为是跳过所有JavaScript内容，只需在新选项卡中打开链接即可。我在Windows上使用每个主要浏览器的最新版本进行了快速测试，IE，Firefox和Opera都是这样做的。但是，Chrome和Safari会显示指示符，并在当前标签中打开链接。

有关如何使其在所有浏览器上保持一致的任何建议吗？

Answer 1

您可以使用the code here来处理中间点击，并按Ctrl +点击查看here。但是，我发现我必须使用.mousedown进行中间点击而不是点击（至少在Firefox中）。

如果您使用

$('#link').click(function(e) {
    if(e.ctrlKey && e.which == 1 || e.which == 2) { // Ctrl + Click
        console.log("hi");
        $(this).css('color','#aaa');
        $(this).click(function(e) { e.preventDefault(); });
    } 
});

并且不添加e.preventDefault()，它应该按预期工作。适用于Firefox，Chrome和IE9。

编辑：没有jQuery，我就是这样做的。不过，请查看关于preventDefault()与return false;的{{3}}。

document.querySelector('#link').onclick = function(e) {
    this.style.color = '#aaa';
    disableLink(this);
}

// middle clicks only captured in mousedown
document.querySelector('#link').onmousedown = function(e) { 
    this.style.color = '#aaa';
    if (e.button == 1) {
        disableLink(this);
    }
}

function disableLink(elem) { 
    elem.onclick = function(e) { console.log("HI"); this.href = '#'; return false;}
    elem.onmousedown = function(e) { console.log("HI"); this.href = '#'; return false;}
}

不幸的是，Chrome和Firefox处理中间点击的方式似乎有所不同。 Firefox仅在onmousedown中显示中间点击，并在onmousedown期间打开一个新标签。这意味着对于Firefox，我们必须在onmousedown之后禁用链接。但是，在Chrome中，中间点击会显示在onmousedown和onclick中，但该链接仅在onclick之后打开。由于我们禁用了mousedown上的链接，onclick永远不会有机会运行:(。

不确定如何解决这个问题......

通过精美链接获得一致的跨浏览器行为

1 个答案: