3

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?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
codecab
  • 111
  • 1
  • 8
  • Did you try returning false in the on click event handler? That should do it I think. – ldionmarcil Feb 14 '13 at 17:41
  • 1
    Disable the default event [`event.preventDefault`](https://developer.mozilla.org/en-US/docs/DOM/event.preventDefault) and handle it yourself (you should also probably change the cursor appearance to `default` when you disable the link). – steveax Feb 14 '13 at 17:44
  • @steveax Does that mean i'd have to handle the anchor target lookup myself, too? - Also, the cursor already changes back, and the href is not set anymore when i click the second time. – codecab Feb 14 '13 at 17:50
  • Why change the cursor? It looks like the link is still to behave as a button. – Popnoodles Feb 14 '13 at 17:51
  • Yes, you'd have to handle the url request yourself. @popnoodles, if the link is disabled, it shouldn't have the pointer cursor as this is a cue to the user that clicking will do something. – steveax Feb 14 '13 at 18:15
  • I am under the impression the link still does something otherwise why is he/she binding a click event? User still needs to know "yes, click this" – Popnoodles Feb 14 '13 at 18:17
  • I'd accept steveax's comment as an answer. Just sayin – codecab Jul 22 '13 at 13:39

3 Answers3

0

With this code you can stop anchors from opening the links:

$('a').on('click', function(e){
  e.preventDefault();
});
Hugo Alves
  • 1,555
  • 2
  • 18
  • 41
  • that looks awfully like jquery. OP seems to be using vanilla. – Popnoodles Feb 14 '13 at 17:45
  • It still looks awfully like jQuery! – Popnoodles Feb 14 '13 at 17:50
  • i like to use jquery because i hate javascript on the html, and i find it nicer to assign a event to a array os elements this way. – Hugo Alves Feb 14 '13 at 17:57
  • I like jQuery too, but i'm working on a legacy app. The "don't look at it, don't think about it" rule applies. Adding/removing a rotating gif should be possible without using a framework. – codecab Feb 14 '13 at 18:02
  • " i hate javascript on the html, and i find it nicer to assign a event to a array " then supplying an answer using jQuery is no use when the question doesn't specify jQuery. You can still do it without javascript in the HTML without using jQuery. – Popnoodles Feb 14 '13 at 18:16
0

You could try setting pointer-events property to none on first click and restore it to default after the aforementioned backend processing is done. For instance

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
  • 12,233
  • 3
  • 36
  • 50
-1
<a id="indicate" href="/foo"><img src="icon.png" /></a>

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

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

Some people will say to use return false, which is sometimes fine but not always the best idea. event.preventDefault() vs. return false

Community
  • 1
  • 1
Popnoodles
  • 28,090
  • 2
  • 45
  • 53