I have a couple of links, which need a few seconds to process before sending the response, so i'd like to implement an indicator icon. Here's my starting point:
<a href="/foo"><img src="icon.png" /></a>
It's a legacy app, and the code already is a mess, so I don't mind and use an inline event handler:
<a href="/foo"><img src="icon.png" onclick="indicate(this)" /></a>
Also, there's no JS framework tied in. I could use some other mechanics to apply the event handler, but that won't alter the problem I'm trying to solve.
Since the backend processing consumes lot of resources, I want to keep the user from clicking multiple times. I tried to remove the href attribute on first click. It seems, by using a timeout the href is removed properly after sending the request, but both Firefox and IE9 allow me to click the link again.
Here's the indicate()
function:
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);
}
So the question is, how can I remove the "clickability" from a link (anchor) by clicking it?