Question

我有几个链接，在发送响应之前需要几秒钟来处理，所以我想实现一个指示符图标。这是我的出发点：

<a href="/foo"><img src="icon.png" /></a>

这是一个遗留应用程序，代码已经很乱，所以我不介意并使用内联事件处理程序：

<a href="/foo"><img src="icon.png" onclick="indicate(this)" /></a>

此外，还没有JS框架。我可以使用其他一些机制来应用事件处理程序，但这不会改变我试图解决的问题。

由于后端处理会消耗大量资源，因此我希望防止用户多次点击。我试图在第一次单击时删除href属性。看来，通过使用超时，发送请求后href被正确删除，但firefox和IE9都允许我再次点击链接。

这是indication（）函数：

function indicate(e) {
    if (indicator.ref.nodeName) indicateStop();

    // save state
    indicator.ref = e;
    indicator.orig.href = indicator.ref.parentNode.href;
    indicator.orig.src = indicator.ref.src;

    // replace icon
    indicator.ref.src = indicator.src;

    // remove href
    setTimeout(function(){ indicator.ref.parentNode.removeAttribute("href"); }, 20);
}

所以问题是，如何通过点击链接（锚点）来删除“可点击性”？

Answer 1

使用此代码，您可以阻止锚点打开链接：

$('a').on('click', function(e){
  e.preventDefault();
});

Answer 2

<a id="indicate" href="/foo"><img src="icon.png" /></a>

document.getElementById('indicate').addEventListener('click', indicate, false);

function indicate(e) {
    e.preventDefault();
}

有些人会说使用return false，这有时很好，但并不总是最好的主意。 event.preventDefault() vs. return false

从链接中删除“可点击性”（锚标记）

2 个答案: