Tutorial jquery

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.

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

Artículos relacionados

bideo.js – poner video en el fondo de página... Librería que permit de forma sencilla, poner un video como fondo en una página web. Es muy utilizado en páginas de inicio para intentar impactar al vi...
JQuery – Trigger – Como ejecutar un cl... En muchos ocasiones nos puede interesar simular el click de un usuario sobre un enlace. Dicho de otro modo, provocar el click en un enlace sin que sea...
jQuery datepicker, php, mysql y las fechas en form... Veamos un caso particular a la hora de programar con jquery ui. El componente DatePicker nos proporciona una manera muy visual y eficiente de insertar...
jQuery – Tutorial 02 – Puesta en march... Segundo tutorial de 7 minutos que muestra cómo llamar a la librería desde nuestra página, sea con la librería descargada como llamada a librería aloja...