Empêcher les clics multiples sur le bouton

j'ai trouvé cette solution qui est simple et a travaillé pour moi:

<form ...>
<input ...>
<button ... onclick="this.disabled=true;this.value='Submitting...'; this.form.submit();">
</form>

Cette solution a été trouvée dans: solution originale

désactiver le bouton sur le clic, l'activer après l'opération complète

$(document).ready(function () {
    $("#btn").on("click", function() {
        $(this).attr("disabled", "disabled");
        doWork(); //this method contains your logic
    });
});

function doWork() {
    alert("doing work");
    //actually this function will do something and when processing is done the button is enabled by removing the 'disabled' attribute
    //I use setTimeout so you can see the button can only be clicked once, and can't be clicked again while work is being done
    setTimeout('$("#btn").removeAttr("disabled")', 1500);
}

exemple pratique

JS fournit une solution facile en utilisant les propriétés de l'événement:

$('selector').click(function(event) {
  if(!event.detail || event.detail == 1){//activate on first click only to avoid hiding again on multiple clicks
    // code here. // It will execute only once on multiple clicks
  }
});

j'ai modifié la solution de @Kalyani et jusqu'à présent ça a fonctionné à merveille!

$('selector').click(function(event) {
  if(!event.detail || event.detail == 1){ return true; }
  else { return false; }
});

en utilisant le nombre,

 clickcount++;
    if (clickcount == 1) {}

après être revenu cliquez à nouveau sur le bouton Mettre à zéro.

nous pouvons utiliser sur et Hors clic pour empêcher les clics multiples. j'ai essayé mon application et ça marche comme prévu.

$(document).ready(function () {     
    $("#disable").on('click', function () {
        $(this).off('click'); 
        // enter code here
    });
})

désactivez les événements pointeurs dans la première ligne de votre rappel, puis reprenez-les sur la dernière ligne.

element.on('click', function() {
  element.css('pointer-events', 'none'); 
  //do all of your stuff
  element.css('pointer-events', 'auto');   
};

peut être cela aidera et donner la fonctionnalité désirée:

$('#disable').on('click', function(){
    $('#disable').attr("disabled", true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="disable">Disable Me!</button>
<p>Hello</p>

une façon de procéder est de définir un compteur et si le nombre dépasse le nombre donné, vous devez retourner false. facile que cela.

var mybutton_counter=0;
$("#mybutton").on('click', function(e){
    if (mybutton_counter>0){return false;} //you can set the number to any
    //your call
     mybutton_counter++; //incremental
});

assurez-vous, si la déclaration est en haut de votre appel.

cela devrait fonctionner pour vous:

$(document).ready(function () {
    $('.applicationButton').click(function (e) {
        var btn = $(this),
            isPageValid = Page_ClientValidate(); // cache state of page validation
        if (!isPageValid) {
            // page isn't valid, block form submission
            e.preventDefault();
        }
        // disable the button only if the page is valid.
        // when the postback returns, the button will be re-enabled by default
        btn.prop('disabled', isPageValid);
        return isPageValid;
    });
});

s'il vous plaît noter que vous devriez également prendre des mesures côté serveur pour éviter les doubles-messages que tous les visiteurs de votre site ne seront pas assez Polis pour le visiter avec un navigateur (et encore moins un navigateur JavaScript-activé).

si vous faites un aller-retour complet post-back, vous pouvez juste faire disparaître le bouton. S'il y a des erreurs de validation, le bouton sera visible à nouveau lors du rechargement de la page.

ajouter un style à votre bouton:

<h:commandButton id="SaveBtn" value="Save"
    styleClass="hideOnClick"
    actionListener="#{someBean.saveAction()}"/>

ensuite, faites-le cacher lorsque cliqué.

$(document).ready(function() {
    $(".hideOnClick").click(function(e) {
        $(e.toElement).hide();
    });
});

après des heures de recherche je l'ai fixé de cette façon:

    old_timestamp == null;

    $('#productivity_table').on('click', function(event) {

    // code executed at first load
    // not working if you press too many clicks, it waits 1 second
    if(old_timestamp == null || old_timestamp + 1000 < event.timeStamp)
    {
         // write the code / slide / fade / whatever
         old_timestamp = event.timeStamp;
    }
    });

il suffit de copier coller ce code dans votre script et éditer #button1 avec votre id de bouton et il résoudra votre problème.

 <script type="text/javascript">
                $(document).ready(function(){  
                     $("#button1").submit(function() {
                            $(this).submit(function() {
                                return false;
                            });
                            return true;
                        }); 
        });
     </script