Comment empêcher un double-clic en utilisant jQuery?

J’ai un bouton en tant que tel:

 

Dans jQuery, j’utilise ce qui suit, mais il permet toujours un double-clic:

  $(document).ready(function () { $("#submit").one('click', function (event) { 

Une idée sur comment je peux empêcher le double-clic?

Le paramètre jQuery one () déclenche le gestionnaire d’événements associé une fois pour chaque élément lié, puis supprime le gestionnaire d’événements.

Si, pour une raison quelconque, les conditions ne sont pas remplies, il est également possible de désactiver le bouton après avoir cliqué dessus.

 $(document).ready(function () { $("#submit").one('click', function (event) { event.preventDefault(); //do something $(this).prop('disabled', true); }); }); 

Il convient de noter que l’utilisation de l’ID submit peut provoquer des problèmes, car elle écrase la fonction form.submit avec une référence à cet élément.

Juste une solution de plus:

 $('a').on('click', function(e){ var $link = $(e.target); e.preventDefault(); if(!$link.data('lockedAt') || +new Date() - $link.data('lockedAt') > 300) { doSomething(); } $link.data('lockedAt', +new Date()); }); 

Ici, nous sauvegardons l’heure du dernier clic en tant qu’atsortingbut de données, puis vérifions si le clic précédent était effectué il y a plus de 0,3 seconde. Si elle est fausse (il y a moins de 0,3 seconde), il suffit de mettre à jour l’heure du dernier clic, si elle est vraie, faites quelque chose.

jsbin

Ma solution: https://gist.github.com/pangui/86b5e0610b53ddf28f94 Il empêche le double clic mais accepte plus de clics après 1 seconde. J’espère que cela aide.

Voici le code:

 jQuery.fn.preventDoubleClick = function() { $(this).on('click', function(e){ var $el = $(this); if($el.data('clicked')){ // Previously clicked, stop actions e.preventDefault(); e.stopPropagation(); }else{ // Mark to ignore next click $el.data('clicked', true); // Unmark after 1 second window.setTimeout(function(){ $el.removeData('clicked'); }, 1000) } }); return this; }; 

J’ai trouvé que la plupart des solutions ne fonctionnaient pas avec des clics sur des éléments tels que des étiquettes ou des DIV (par exemple, lors de l’utilisation de contrôles Kendo). J’ai donc fait cette solution simple:

 function isDoubleClicked(element) { //if already clicked return TRUE to indicate this click is not allowed if (element.data("isclicked")) return true; //mark as clicked for 1 second element.data("isclicked", true); setTimeout(function () { element.removeData("isclicked"); }, 1000); //return FALSE to indicate this click was allowed return false; } 

Utilisez-le à l’endroit où vous devez décider de démarrer un événement ou non:

 $('#button').on("click", function () { if (isDoubleClicked($(this))) return; ..continue... }); 

Dans mon cas, jQuery one avait des effets secondaires (dans IE8) et j’ai fini par utiliser ce qui suit:

 $(document).ready(function(){ $("*").dblclick(function(e){ e.preventDefault(); }); }); 

qui fonctionne très bien et semble plus simple. Vous l’avez trouvé ici: http://www.jquerybyexample.net/2013/01/disable-mouse-double-click-using-javascript-or-jquery.html

Il suffit de mettre cette méthode dans vos formulaires, elle gérera ensuite le double-clic ou plusieurs clics. Une fois la demande envoyée, il ne sera pas possible d’envoyer à nouveau la demande.

  

cela vous aidera à coup sûr.

J’ai le même problème. Vous pouvez utiliser setTimeout () pour éviter le double-clic.

 //some codes here above after the click then disable it 

// vérifie également ici s’il y a un atsortingbut désactivé

// s’il y a un atsortingbut désactivé dans la balise btn alors // retourne. Convertissez cela en js.

 $('#btn1').prop("disabled", true); setTimeout(function(){ $('#btn1').prop("disabled", false); }, 300); 

Ce que j’ai découvert était une solution ancienne mais efficace sur les navigateurs modernes. Fonctionne pour ne pas basculer les classes sur le double clic.

 $('*').click(function(event) { if(!event.detail || event.detail==1){//activate on first click only to avoid hiding again on double clicks // Toggle classes and do functions here $(this).slideToggle(); } }); 

C’est mon premier poste et je suis très inexpérimenté, alors je vous en prie, mais je pense avoir une consortingbution valable qui peut être utile à quelqu’un …

Parfois, il faut une très longue fenêtre de temps entre les clics répétés (par exemple, un lien mailto où il faut quelques secondes pour que l’application e-mail s’ouvre et vous ne voulez pas qu’elle se déclenche), mais vous ne voulez pas ralentir utilisateur ailleurs. Ma solution consiste à utiliser les noms de classe pour les liens en fonction du type d’événement, tout en conservant la fonctionnalité de double-clic ailleurs …

 var controlspeed = 0; $(document).on('click','a',function (event) { eventtype = this.className; controlspeed ++; if (eventtype == "eg-class01") { speedlimit = 3000; } else if (eventtype == "eg-class02") { speedlimit = 500; } else { speedlimit = 0; } setTimeout(function() { controlspeed = 0; },speedlimit); if (controlspeed > 1) { event.preventDefault(); return; } else { (usual onclick code goes here) } }); 

J’ai eu un problème similaire, mais la désactivation du bouton n’a pas complètement fait l’affaire. Il y a eu d’autres actions qui ont eu lieu lorsque l’utilisateur a cliqué sur le bouton et, parfois, le bouton n’était pas désactivé assez tôt et lorsque l’utilisateur cliquait deux fois, 2 événements étaient déclenchés.
J’ai pris l’idée du délai d’attente de Pangui et j’ai combiné les deux techniques, en désactivant le bouton et en incluant un délai, au cas où. Et j’ai créé un simple plugin jQuery:

 var SINGLECLICK_CLICKED = 'singleClickClicked'; $.fn.singleClick = function () { var fncHandler; var eventData; var fncSingleClick = function (ev) { var $this = $(this); if (($this.data(SINGLECLICK_CLICKED)) || ($this.prop('disabled'))) { ev.preventDefault(); ev.stopPropagation(); } else { $this.data(SINGLECLICK_CLICKED, true); window.setTimeout(function () { $this.removeData(SINGLECLICK_CLICKED); }, 1500); if ($.isFunction(fncHandler)) { fncHandler.apply(this, arguments); } } } switch (arguments.length) { case 0: return this.click(); case 1: fncHandler = arguments[0]; this.click(fncSingleClick); break; case 2: eventData = arguments[0]; fncHandler = arguments[1]; this.click(eventData, fncSingleClick); break; } return this; } 

Et puis utilisez-le comme ceci:

 $("#button1").singleClick(function () { $(this).prop('disabled', true); //... $(this).prop('disabled', false); }) 
 /* Double click behaves as one single click "It is inadvisable to bind handlers to both the click and dblclick events for the same element. The sequence of events sortingggered varies from browser to browser, with some receiving two click events before the dblclick and others only one. Double-click sensitivity (maximum time between clicks that is detected as a double click) can vary by operating system and browser, and is often user-configurable." That way we have to check what is the event that is being executed at any sequence. */ var totalClicks = 1; $('#elementId').on('click dblclick', function (e) { if (e.type == "dblclick") { console.log("e.type1: " + e.type); return; } else if (e.type == "click") { if (totalClicks > 1) { console.log("e.type2: " + e.type); totalClicks = 1; return; } else { console.log("e.type3: " + e.type); ++totalClicks; } //execute the code you want to execute } }); 

La solution fournie par @Kichrum a presque fonctionné pour moi. J’ai également dû append e.stopImmediatePropagation () pour empêcher l’action par défaut. Voici mon code:

 $('a, button').on('click', function (e) { var $link = $(e.target); if (!$link.data('lockedAt')) { $link.data('lockedAt', +new Date()); } else if (+new Date() - $link.data('lockedAt') > 500) { $link.data('lockedAt', +new Date()); } else { e.preventDefault(); e.stopPropagation(); e.stopImmediatePropagation(); } }); 

“Peasy facile”

 $(function() { $('.targetClass').dblclick(false); });