Javascript 通过奇特的链接获得一致的跨浏览器行为

我正在为一个网站做一些奇怪的链接

当用户单击一个链接时，链接旁边会出现一个类似于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会显示指示器并在当前选项卡中打开链接

关于如何使其在所有浏览器上保持一致性，您有什么建议吗？

您可以使用它来处理中间的单击，并查看Ctrl+click。然而，我发现我必须使用.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（）

vs

returnfalse

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
永远没有机会运行：（

不知道如何解决这个问题…
你的GIF让我抓狂。每次我的眼睛经过它，我想我都在等待加载。如果加载新页面，你不能禁用链接吗？浏览器在加载页面时会非常清楚。如果你只是禁用链接，那么他们再次单击它就没关系了。@David，我有什么方法吗是否可以调用以确定是否正在加载新页面？我在这个项目上没有jQuery。（我有原型，尽管这个特定功能的现有代码没有使用它。）我可以修改它以在没有jQuery的情况下工作吗？