The various ways of disabling a tag

In certain project we commit into a problem of the need to disable <a> on click for a while because if we click too fast, ajax would be dying to handle those requests and throw some unexpected output, and we come to some certain solutions.

Replace <a> tag into <button> one

Since <a> tag has no attribute to be disabled, the obvious way is that we changed into button and use some simple jQuery commands to set the disabled attribute to true or disabled.

However this solution doesn't come to handy because sometimes the customer doesn't want to change the whole design and css of the page so...

Using a built-in css 

This seems like a perfect solution, we add pointer-events : none into the css of the <a> tag when on click is called and after we complete our ajax get / post request, we use complete function to undo the set. This way works for a while since only after ajax request complete user can click again.

But pointer-events seems not to favour Safari or mobile devices, it doesn't work on some certain cases, we can not even click the a tag itself.

Setting timeout for on click

It would be great idea to bind on click event to a Javascript variable, then set a timeout function to control the flow of request. But the downside of this solution is that we have to hard code our dead time waiting, this is not recommended at all.

Using bind / unbind, on /off

This solution is like the best solution which right after catching on click events, we unbind the click on <a> tag itself, after ajax request we can bind it again. On / off is little different since off function will erase all binding of <a> tag itself.

Using a div to overhide the a tag

The last solution I come to is to define another parallel div with a tag. I defined the parent to be position relative while both a and div is absolute. Additionally by default I set it to be display none. After on click event is triggered, I set the display of div into inline, and once complete that, I set into inline.

This method looks like the dummiest resource and solution ever but for my desperate situation, still it works like a charm and not conflict with any browser nor smartphone.  

If you liked this article

Let's subscribe the updates of Scuti!

Share on Google Plus

About Anonymous

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.