jQuery – Evitar doble click en un botón

Uno de los problemas que podemos encontrarnos en jQuery, y más concretamente en el comportamiento de un botón, es que se haga doble click sobre él. Cómo evitar en con jQuery el coble click en un botón?

En muchas ocasiones, más de las que nos pensamos, nos interesará que un botón, sólo se ejecute una vez. Este problema podemos encontrarlo en esas personas que le hacen a todo doble-click. Que vemos un botón en una web? doble click. Que vemos un enlace? doble-click. Así, sin anestesia.

Para nosotros, eso es un grave problema. El doble click, en un botón puede hacer que una orden se ejecute dos veces: añadir un registro, enviar un formulario… todo, dos veces…

Aquí os dejo el código para que veáis en acción lo que estamos hablando:

See the Pen jQuery – Evitar doble click botón by Trescomatres Multimèdia S.L. (@trescomatres) on CodePen.

Veamos más claro el código jQuery que se encarga de tratar si hemos pulsado o no el botón

// Variable global que nos dirá si hemos dado un click al botón
 var clicando= false;

 // Evento del segundo boton
 $("#btn-only1click").click(function() {
   // Si ha sido clicado
   if (clicando){
     // Mostramos que ya se ha clicado, y no puede clicarse de nuevo
     alert( "Que ya he realizado un click." );
   // Si no ha sido clicado
   } else {
     // Le decimos que ha sido clicado
     clicando= true;
     // Mostramos el mensaje de que ha sido clicado
     alert( "Handler for only1click.click() called." );
   }
 });

Como podéis ver, en el evento click, tratamos la variable clicando que es la que indica si hemos clicado ya sobre el botón. Esta variable debe ser global.

Parece una tontería, pero no lo es. Hay muchos usuarios, sobretodo mayores, que todavía tienen el ‘doble click’ en el dedo índice. No son usuarios habituales, y no distinguen entre pulsar sobre un botón de una aplicación web, que abrir una aplicación en su Windows 7 dándole dos veces a un icono.

Por otro lado, no es sólo para tratar un tipo de usuario específico, también debemos prevenir cualquier tipo de error, y uno muy simple es pulsar dos veces sobre un botón. Podría pasar.

Más artículos sobre jquery y formularios:

Evitar envío formulario con tecla Enter con jquery

Espero que os de una idea de cómo hacerlo.