删除“;可点击性”;来自链接(锚定标记）

Remove the "clickability" from a link (anchor tag)

本文关键字：链接 删除      更新时间：2023-09-26

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

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

所以问题是，我如何才能删除"；可点击性"；点击链接（锚点）？

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

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

您可以尝试在第一次单击时将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>

<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.prventDefault（）与return false

相关文章：