Block click the menu item after the first click

Question

I’m having a hard time blocking simultaneous clicks on menu items in my application, when the user first clicks I want to block attempts at new clicks, I want to do this because there is a user clicking a 100 times menu item that takes about 15 seconds to load and is overloading the system.

Here’s an example of the html code and javascript I’m trying to use for blocking.

$(document).ready(function () {
    $('a').on('click', function () {
        $(this).attr('disabled', true);
        $(this).addClass("disabled");
        $(this).prop("onclick", null).off('click');;
    });
});

<ul class="dropdown-menu">
    <li>@Html.ActionLink("Teste", "Index", "Teste")</li>                       
</ul>

Answer 1

You can do it two ways.

Using class (or even attribute - just define your css like this a[disabled] {...}) with the property pointer-events.

.disabled {
    pointer-events: none;
}   

<a href="#id" onclick="alert('Ola');">Clique funciona</a>
<br />
<a href="#id" class="disabled" onclick="alert('Ola');">Clique não funciona</a>

Or using preventDefault() through the event click.

$(document).ready(function () {
    $('a').on('click', function (event) {
        //Verifica se ele já possui o atributo disabled
        if ($(this).is("[disabled]")) {
            return event.preventDefault();
        }

        //Adiciona o atributo disabled
        $(this).attr("disabled", "disabled");
        alert('jQuery');
    });
});

See this example working: http://jsfiddle.net/o2gxgz9r/68/

Answer 2

I don’t know if it solves your problem, but if tag creating a href and redirecting to a new page, but since it takes time to remove the action, could remove the "href" of tag after the click.

try this:

$(document).ready(function () {
    $('a').on('click', function(){
        $(this).removeAttr('href');
    });
});