删除链接（锚标签）的“可点击性”

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都允许我再次单击链接。

以下是“indicate（）”函数：

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);
}

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

- codecab

---

你尝试在点击事件处理程序中返回false了吗？我想那应该可以解决问题。 - ldionmarcil

禁用默认事件event.preventDefault，并自行处理它（当您禁用链接时，您还应该将光标外观更改为default）。 - steveax

为什么要改变光标？它看起来像链接仍然表现为按钮。 - Popnoodles

我认为该链接仍然有作用，否则为什么要绑定点击事件？用户仍然需要知道“是的，点击这个”。 - Popnoodles

我会接受steveax的评论作为答案。只是说一下。 - codecab

Answer 1

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

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

- Hugo Alves

---

看起来非常像 jQuery。 OP 似乎在使用原生 JavaScript。 - Popnoodles

它看起来仍然非常像jQuery！ - Popnoodles

我喜欢使用jQuery，因为我不喜欢在HTML中使用JavaScript，并且我发现这种方式将事件分配给一组元素更加方便。 - Hugo Alves

我也喜欢jQuery，但我正在处理一个遗留应用程序。适用于“不要看它，不要想它”的规则。添加/删除旋转GIF应该可以在不使用框架的情况下实现。 - codecab

我讨厌在HTML中使用JavaScript，我觉得将事件分配给数组更好。当问题没有指定jQuery时，提供jQuery的答案是无用的。你仍然可以在不使用jQuery的情况下在HTML中完成它。 - Popnoodles

Answer 2

你可以尝试在第一次点击时将pointer-events属性设置为none，并在完成上述后端处理后将其恢复为默认值。例如：

function indicate(el) {
  el.style.pointerEvents = 'none';
  
  // Simulate a long running operation
  setTimeout(() => {
    el.style.pointerEvents = 'auto';
  }, 2000);
}

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

- Shreevardhan

Answer 3

<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

- Popnoodles

---

在我的情况下，e实际上就是我单击的元素.. 因此没有e.preventDefault()。 - codecab