Clever Geek Handbook

Remove clickability from link (anchor tag)

I have several links that take a few seconds to process before submitting a response, so I would like to use an indicator icon. Here's my starting point:

<a href="/foo"><img src="icon.png" /></a>

This is a legacy application and the code is already a mess, so I don't mind and use the built-in event handler:

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

Also, there is no JS framework. I could use some other mechanisms to apply the event handler, but that doesn't change the problem I'm trying to solve.

Since the backend processing is resource intensive, I want the user to click multiple times. I tried to remove the href attribute on the first click. It seems with a timeout the href is removed as expected after the request is sent, but both firefox and IE9 allow me to click the link again.

Here's the show () 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 do you remove clickability from a link (anchor) by clicking on it?

+3


source to share


2 answers


With this code, you can stop bindings when links are opened:



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


source 


<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 they use return false, which is sometimes fine, but not always the best idea. event.preventDefault () vs. return false

-1


source






More articles:


All Articles