Prévention de plusieurs clics sur le bouton

J'ai suivi le code jQuery pour éviter de cliquer deux fois sur un bouton. Ça marche bien. J'utilise Page_ClientValidate() pour s'assurer que le double clic est empêché que si la page est valide. [S'il y a des erreurs de validation, le drapeau ne doit pas être défini car il n'y a pas de retour sur serveur démarré]

Existe-t-il une meilleure méthode pour éviter le deuxième clic sur le bouton avant que la page ne soit rechargée?

Peut-on définir le drapeau isOperationInProgress = yesIndicator uniquement si la page provoque un postback vers le serveur? Y a-t-il un event approprié qui sera appelé avant que l'utilisateur puisse cliquer sur le bouton pour la deuxième fois?

Remarque : Je recherche une solution qui ne nécessitera aucune nouvelle API

Note : Cette question n'est pas un double. Ici, j'essaie d'éviter l'utilisation de Page_ClientValidate() . Je cherche également un event où je peux déplacer le code afin que je n'ai pas besoin d'utiliser Page_ClientValidate()

Remarque : Aucun ajax n'est impliqué dans mon scénario. Le formulaire ASP.Net sera soumis au serveur de manière synchrone. L'événement de clic de bouton dans javascript est uniquement pour éviter un double clic. La soumission de formulaire est synchrone à l'aide d'ASP.Net.

Code actuel

 $(document).ready(function () { var noIndicator = 'No'; var yesIndicator = 'Yes'; var isOperationInProgress = 'No'; $('.applicationButton').click(function (e) { // Prevent button from double click var isPageValid = Page_ClientValidate(); if (isPageValid) { if (isOperationInProgress == noIndicator) { isOperationInProgress = yesIndicator; } else { e.preventDefault(); } } }); });

Références :

Le validateur entraîne un comportement incorrect pour un double clic
Que ce soit pour utiliser Page_IsValid ou Page_ClientValidate () (pour les événements côté client)

Remarque par @Peter Ivan dans les références ci-dessus:

Appelant Page_ClientValidate () à plusieurs reprises peut entraîner une intrusion trop lourde (plusieurs alertes, etc.).

J'ai trouvé cette solution simple et fonctionnelle 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ésactivez le bouton sur le clic, activez-le une fois l'opération terminée

 $(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 de travail

JS fournit une solution simple 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 } });

En utilisant le compte,

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

Après avoir repris le compte de clic défini à zéro.

La façon dont vous faites cela est de définir un compteur et si le nombre dépasse le certain nombre renvoyer faux. C'est facile.

 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 l'énoncé est sur 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; }); });

Veuillez noter que vous devriez également prendre des mesures sur le serveur pour éviter les doublons, car tous les visiteurs de votre site ne seront pas suffisamment informés pour le visiter avec un navigateur (et encore moins un navigateur compatible JavaScript).

Désactivez les événements du pointeur 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'); };

Si vous faites un retour arrière complet, vous pouvez simplement faire disparaître le bouton. S'il y a des erreurs de validation, le bouton sera visible à nouveau lors du rechargement de la page.

Premier réglage, ajoutez un style à votre bouton:

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

Ensuite, faites-le masquer lorsque vous cliquez dessus.

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

Peut-être que cela aidera et donnera la fonctionnalité souhaité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>

Nous pouvons utiliser on and off pour éviter tout clic. Je l'ai essayé à mon application et il fonctionne comme prévu.

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

Après des heures de recherche, je l'ai réparé 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; } });