¿Cómo evitar un doble clic usando jQuery?

Question

tengo un botón como tal:

<input type="submit" id="submit" value="Save" /> 

Dentro de jQuery Estoy utilizando el siguiente, pero todavía permite la hace doble clic:

<script type="text/javascript"> 

$(document).ready(function() { 

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

Alguna idea sobre cómo puedo evitar que haga doble clic ?

Answer 1

jQuery's one() activará el controlador de eventos adjunto una vez por cada elemento vinculado, y luego eliminará el controlador de eventos.

Si por algún motivo no cumple con los requisitos, también se puede desactivar el botón por completo después de haber hecho clic en él.

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

Cabe señalar que el uso de la ID submit puede causar problemas, ya que sobrescribe la función form.submit con una referencia a ese elemento.

Answer 2

En mi caso, jQuery uno tenía algunos efectos secundarios (en IE8) y yo acabamos utilizando la siguiente:

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

que funciona muy bien y se ve más simple. Encontrado allí: http://www.jquerybyexample.net/2013/01/disable-mouse-double-click-using-javascript-or-jquery.html

Answer 3

Mi solución: https://gist.github.com/pangui/86b5e0610b53ddf28f94 Impide el doble clic pero acepta más clics después de 1 segundo. Espero eso ayude.

Aquí está el código:

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; 
}; 

Answer 4

Sólo uno más solución:

$('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()); 
}); 

Aquí se guarda la hora del último clic como atributo de datos y luego comprobar si clic anterior era más de 0,3 segundos hace. Si es falso (hace menos de 0.3 segundos), simplemente actualice la última hora de clic, si es verdadero, haga algo.

jsbin

Answer 5

tuve un problema similar, pero deshabilitar el botón no se hicieron plenamente el truco. Hubo algunas otras acciones que tuvieron lugar cuando se hizo clic en el botón y, a veces, el botón no se deshabilitó lo suficientemente pronto y cuando el usuario hizo doble clic, 2 eventos se desencadenaron.
Tomé la idea de tiempo de espera de Pangui, y combiné ambas técnicas, desactivando el botón e incluyendo un tiempo de espera, por las dudas. Y he creado un simple plugin de 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; 
} 

y luego usarlo como esto:

$("#button1").singleClick(function() { 
    $(this).prop('disabled', true); 
    //... 
    $(this).prop('disabled', false); 
}) 

Answer 6

tengo el problema similar. Puede usar setTimeout() para evitar el doble clic.

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

// también comprobar aquí si hay un atributo deshabilitado

// si hay un atributo deshabilitado en la etiqueta BTN continuación // retorno. Convierta eso en js.

$('#btn1').prop("disabled", true); 

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

Answer 7

Descubrí que la mayoría de las soluciones no funcionaban con clics en elementos como etiquetas o DIV (por ejemplo, al usar controles de Kendo). Así que hice esta solución sencilla:

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; 
} 

usarlo en el lugar donde tiene que decidir comenzar un evento o no:

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

    ..continue... 
}); 

Answer 8

/* 
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 triggered 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 
} 

}); 

Answer 9

La solución proporcionada por @Kichrum casi trabajó para yo. Tuve que agregar e.stopImmediatePropagation() también para evitar la acción predeterminada. Aquí está mi código:

$('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(); 
    } 
}); 

Answer 10

simplemente ponga este método en sus formularios y luego se hará doble clic o más clics en una vez. una vez que la solicitud lo envíe no permitirá enviar una y otra vez la solicitud.

<script type="text/javascript"> 
     $(document).ready(function(){ 


      $("form").submit(function() { 
        $(this).submit(function() { 
         return false; 
        }); 
        return true; 
       }); 

     }); 
     </script> 

lo ayudará con seguridad.

Answer 11

Lo que descubrí fue una solución antigua pero funcional en los navegadores modernos. Funciona para no alternar clases con el doble 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(); 
    } 
}); 

Answer 12

"Easy Peasy"

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