0

我正在开发一个对一些链接做了一些奇怪的事情的网站。

当用户点击一个链接时，一个看起来有点像这样的指示器 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 会显示指示器并在当前选项卡中打开链接。

关于如何使其在所有浏览器上的行为一致的任何建议？

4

1 回答 1

0

您可以使用此处的代码来处理中间单击，并查看此处的 Ctrl+单击。但是，我发现我必须使用 .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，我会这样做。不过，请查看有关vs的这篇文章。preventDefault()return false;

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。由于我们在鼠标按下时禁用了链接，因此onclick永远没有机会运行:(。

不知道如何解决这个问题...

于 2012-07-15T18:33:22.280 回答