title: Remove the "clickability" from a link (anchor tag)
body: <p>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:</p>
  
  <pre><code>&lt;a href="/foo"&gt;&lt;img src="icon.png" /&gt;&lt;/a&gt;
  </code></pre>
  
  <p>It's a legacy app, and the code already is a mess, so i don't mind and use an inline event handler:</p>
  
  <pre><code>&lt;a href="/foo"&gt;&lt;img src="icon.png" onclick="indicate(this)" /&gt;&lt;/a&gt;
  </code></pre>
  
  <p>Also, theres 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.</p>
  
  <p>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.</p>
  
  <p>Here's the indicate() function:</p>
  
  <pre><code>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);
  }
  </code></pre>
  
  <p>So the question is, how can I remove the "clickability" from a link (anchor) by clicking it? </p>