How to avoid multiple clicks on link

I would like to know what is the best way to avoid multiple clicks on a link. I've read something related with the usage of a CSS class named "Load" or "Loading" but I couldn't understand how to use it in a proper way. Can someone explain to me how to use it?

While I don't understand how to use this CSS class, I've created a boolean variable that is associated to the Enabled field of a link, and that is updated once the user presses the link. Is this the best alternative to the usage of the CSS class?

Thank you,

João Santos

The process is much heavier the way you're doing.

Your process goes to the server (sending viewstate), changes a variable, screen component is refreshed, link no longer works.

CSS works only in the browser, saying link is not clickable, speeding things up.

You just need to add a JavaScript function that disables the link and a property to the link so that it will execute the function when clicked (onclick works along with the default link action, so don't worry with the redirecting).

This just do the trick:


Nuno, while this is faster (and better) from the time it takes to happen, this can be changed in the client side, no? Like, if an user wants, he can change the page (including JavaScript), while in the browser, and stop this from work.

While in most scenarios this is not a problem, it will still depend on the context, I think.

Depending on the context, maybe other solutions, more specific to the use case, would be better, that do not look to the link itself, but inside the action check if the action can be executed or not.

Eduardo Jauch

True, but if the user goes that way, you also need to prevent the resubmitting as well.

J. wrote:

True, but if the user goes that way, you also need to prevent the resubmitting as well.

True :)