javascript - event - Deshabilitar enlaces para detener clics dobles en JQuery

jquery this click

Question

¿Cómo desactivo todos los enlaces con la clase de button una vez que se hace clic una vez? Me gustaría poder hacer esto en un solo lugar, y no tener que cambiarlos a todos individualmente ... ¿Alguna idea?

Hasta ahora tengo esto:

$("a.button").click(function() { $(this).attr("disabled", "disabled"); });
$("a[disabled]").click(function() { return false; });

pero el segundo evento no está disparando ..

Answer 1

Creo que está hablando de un problema común, simplemente no desea que se haga clic en un enlace / botón más de una vez de una vez. Tal vez no desee deshabilitar el botón o el enlace, simplemente quiere evitar "otro clic" antes de que finalice el primer clic.

Si desea una demora entre los clics, esta es una de las opciones:

//prevent double click
$(document).on(''click'', ".one-click", function(e){

    if($(this).data(''lastClick'') + 1000 > new Date().getTime()){

        e.stopPropagation();
        return false;
    }
    $(this).data(''lastClick'', new Date().getTime());
    return true;

});

Lo que se debe hacer a continuación es darles a los botones o enlaces una clase de ''un clic''.

El evento está registrado en el documento, también funcionará para html cargado dinámicamente.

El 1000 en el código es el retraso de un segundo. es decir, dentro del primer segundo del primer clic, cualquier clic se ignora. Cambia el valor de demora como desees.

Me encontré con este problema cuando quiero detener un Bootstrap Modal (modificado y habilitado para Ajax) apareciendo más de una vez. Sin embargo, la solución anterior no ayuda, hay que usar el evento ''show'' y ''hide'' modal de Bootstrap para evitar que aparezcan dos veces.

Answer 2

Es posible que deba deshabilitar las presentaciones de ajax en el botón de formulario y manejar, haga clic en:

 $("form").attr("data-ajax", "false");
    $("[type=''submit'']").click(function (e) {
        var form = $("form");
        if (!this.disabled) {
            if (form.valid()) {
                this.disabled = true;
                form.submit();
            }
        }
    });

Answer 3

Esto debería funcionar cuando estás usando una función

var clickRunning = false;
function OpenSth(){
     if (clickRunning) return;
     clickRunning = true;

     yourFunc({
      /* do your stuff*/
     },500,  function () {
        clickRunning= false;
     });
}

Answer 4

Esto es lo que probaría:

$("a.button").one("click", function() {
    $(this).click(function () { return false; });
});

Enlace todos los enlaces con el "botón" de clase. Ejecute la función anónima solo una vez (de ahí "uno"), que vuelve a enlazar el enlace para devolver falso.

Si desea que se vea más como lo que tiene, intente esto:

$("a.button").click(function() { $(this).attr("disabled", "disabled"); });
$(document).click(function(evt) {
     if ($(evt.target).is("a[disabled]"))
          return false;
});

Answer 5

Esto funciona tanto para IE como para Chrome con atributos href y onclick en etiquetas de anclaje:

$(document).ready(
        function()
        {          
          $(''a.button'').on("click",
            function(event)
            {
              $(''a.button'').prop(''onclick'',null);
              $(''a.button'').removeAttr(''href'');
            });
        });

Answer 6

Estoy usando esto para desactivar el evento de "hacer clic" y enviar dos veces (no los eventos de "doble clic"). Trabaja para IE> = 9, firefox, webkit o Chrome. El primer evento de clic desactiva el botón / link / span, durante un tiempo. Después de que pase el tiempo, se habilita el botón / enlace / lapso y el usuario puede hacer clic en él.

$(document).ready(function() {
/** 
 * disable double click 
 **/
document.addEventListener(''click'', function(event) { 

    var targetElement = event.target || event.srcElement;
    var target = $(targetElement);

    var eLink = target.prop("tagName") === ''A''; // hypertext link
    var eButton = target.prop("tagName") === ''BUTTON''; // button 
    var fButton = target.prop("tagName") === ''SPAN'' && target.parent().parent().hasClass("fbutton"); // flexigrid buttons

    if ( eLink || eButton || fButton ) {

        if ( target.data("clicked") ) {
            event.stopPropagation();
            event.preventDefault();
            if ( window.console ) {
                console.log("double click event disabled");
            }
            return false;
        } else {

            target.data("clicked", true);
            target.prop(''disabled'', true);
            target.addClass("clicked");

            setTimeout(function() {
                target.data("clicked", false);  
                target.prop(''disabled'', false);
                target.removeClass("clicked");

            }, 500); // Do something after 500 millisecondes
            return true;
        }
    }

    }, true);


});

Answer 7

Los eventos solo están enlazados en document.ready, debe manejar esto con un evento .live:

$("a.button").live("click", function() { $(this).attr("disabled", "disabled"); });
$("a[disabled]").live("click", function() { return false; });

Answer 8

Me gusta la idea de solución proporcionada por Adam, sin embargo, esto no funcionó para mí. Si tiene problemas para usar .one() para desactivar enlaces después de hacer clic, le recomiendo que pruebe lo siguiente.

$("a.button").bind("click", function( event ) {
    // Unbind the click event from anchors with class button
    $(this).unbind( event );
});

Answer 9

Sí, establezca un valor para hacer un seguimiento de esto:

$("a").click(function (){
  if( $(this).data("clicked") ){
    return false;
  }
  $(this).data("clicked", true);
  return true;
});

Answer 10

Siempre haces una gran molestia sobre una cosa sipmple.

Establezca la variable de restablecimiento automático del retardador cuando haga clic por primera vez. Eso desactiva los segundos clics durante un tiempo. ¡Sencillo!

    var formvar=1;

$(''#myForm'').submit(function() { 
    if(formvar==1) 
        {
        $(this).ajaxSubmit(options); // or do what ever normally do

        setTimeout(function(){formi=1}, 3000);
        formvar=0;
        }
    else alert("no dbl clicking");


    }); 

Answer 11

También podría simplemente lanzar una clase en la etiqueta de anclaje y verificar al hacer clic:

$(''a.button'').click(function(){ 
  if($(this).hasClass(''clicked'')) return false;
  else { 
    $(this).addClass(''clicked''); 
    return true;
  }
});

Con la clase, puede darle un estilo extra al enlace después del primer clic.

Answer 12

Tengo una solución elegante para esto si estás usando enlaces:

function do_nothing() { 
  return false;
}

// prevent a second click for 10 seconds. :)
$(''.prevent_doubleclick'').live(''click'', function(e) { 
  $(e.target).click(do_nothing); 
  setTimeout(function(){
    $(e.target).unbind(''click'', do_nothing);
  }, 10000); 
});

https://github.com/ssoroka/prevent_doubleclick.js

Voy a agregar soporte para formularios pronto.

Answer 13

crea un JS: inclúyelo en cada página (o en tu página maestra si tienes una).

Creo que algo así como

$(document).ready(function(){
  $(''.button'').click(function(){
    $(''.button'').click(function(e) {
      e.preventDefault();
    });
  });
});

Answer 14

$("a.button").bind(''click'', function() { $(this).attr("disabled", "disabled"); });
$("a[disabled]").live(''click'', function() { return false; });

Lo hace. La primera línea se une a todos los elementos con el botón de clase una función que establece el atributo deshabilitado (por cierto, no válido para los elementos) en desactivado.

La segunda función utiliza el rebinding de eventos en vivo de jQuery para vincular la función de "inhabilitación" a todas las instancias futuras de elementos a que tengan un atributo deshabilitado.

Consulte la documentación de jQuery Event para obtener información más detallada sobre las dos funciones utilizadas, si lo desea

Answer 15

$(''a.button'').bind(''click'', function(){
    alert(''clicked once''); // for debugging
    // remove all event handlers with unbind()
    // add a new function that prevents click from working
    $(this).unbind().bind(''click'', function(){
        alert(''clicked a 2nd time or more''); // for debugging
        return false;
    });
});

Answer 16

$(''a.disableAfterOneClick'').on(''click'', function(e){
    e.preventDefault(); //disabling default behaviour
    if (this.href) //checking if href attr is stil set
    {
        href = this.href; //saving current href for it will be removed
        $(this).removeAttr("href"); //removing href
        window.location.href = href; //redirecting user to href
    }
});