Lock click on the menu item after the first click

Question

Lock click on the menu item after the first click

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

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

Here is an example of the html code and javascript that 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>

javascript html5 asp.net-mvc

asked by anonymous 03.10.2016 / 04:06

2 answers

Spinner with Custom Items (color and round background image) Get Timezone from the browser using angularjs

score 0 · Answer 1

You can do this in two ways.

Using class (or even attribute - just set your css so a[disabled] {...} ) to 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 by using preventDefault() through the click event.

$(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: link

score 0 · Answer 2

I do not know if it solves your problem, but if your tag is creating a href and redirecting to a new page, however, since you want to remove the action, you could remove " href " from tag after the click.

try this:

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