2

Veamos primero el código:

$(function(){ 
  
  $('a').on('click', function() {    
    
      $('#box').slideToggle();
    
    }).dblclick(function(e) {
    
      e.stopPropagation();
      e.preventDefault();
      return false;    
    });  
});
#container {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
}

#box {  
  width: inherit;
  height: inherit;
  background-color: red;
  display: none;
}

a {
  padding: 5px;
  background-color: gray;
  color: white;
  cursor: pointer;
}

a::selection {
  background-color: transparent;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<div id="container">
  <div id="box"></div>
</div>
  
<a>Click me</a>

El problema lo vemos, si hacemos un doble click.

Ahí aparece y desaparece al momento la animación y lo que quiero es evitar que desaparezca.

Como se ve, he probado con el siguiente código:

.dblclick(function(e) {    
  e.stopPropagation();
  e.preventDefault();
  return false;    
});

que lo he encontrado por algún sitio, pero no me funciona.

Tampoco puedo usar el controlador .one() ya que necesito que opere más de una vez.

¿Como se puede evitar el doble click en una animación en jQuery?

0

3 respuestas 3

2

He podido solucionar el problema usando .is(':animated') y evitar así el doble click cuando este en plena animación.

$(function(){ 
  
  $('a').on('click', function() {    
    
      if ($('#box').is(':animated')) {
        
        return false;
        
      } else {
      
        $('#box').slideToggle();
      }
       
    });  
});
#container {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
}

#box {  
  width: inherit;
  height: inherit;
  background-color: red;
  display: none;
}

a {
  padding: 5px;
  background-color: gray;
  color: white;
  cursor: pointer;
}

a::selection {
  background-color: transparent;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<div id="container">
  <div id="box"></div>
</div>
  
<a>Click me</a>

P.D. Estoy dispuesto de ver otras/mejores respuestas que puedan solucionar este problema

1

Pues he encontrado una manera, pero no se si te valdrá, es cambiar la etiqueta <a> por un boton:

$(document).ready(function () {
     $("#btnSubmit").on('click', function (event) {  
          $('#box').slideToggle();
           //event.preventDefault();
           var el = $(this);
           el.prop('disabled', true);
           setTimeout(function(){el.prop('disabled', false); }, 1000);
     });
});
#container {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
}

#box {  
  width: inherit;
  height: inherit;
  background-color: red;
  display: none;
}

a {
  padding: 5px;
  background-color: gray;
  color: white;
  cursor: pointer;
}

a::selection {
  background-color: transparent;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<div id="container">
  <div id="box"></div>
</div>
  
<input type="submit" id="btnSubmit" >

El problema es que el elemento <a> no se puede desactivar, o por lo menos no funciona. Lo comentan en el siguiente enlace Stack Ingles.

1
  • Gracias por tu respuesta pero no puedo usar un botón... porque el elemento <a> ocupa toda la pantalla... funciona como un esc... no se si me explico :)... pero creo que he encontrado una solución... estoy aún aquí de pruebas... Commented el 13 dic. 2016 a las 21:39
0

No sé si hay algún inconveniente con esta forma simple:

var oneclick = true;
  $('a').on('click', function() {    
    if (oneclick) {
      $('#box').slideToggle();
      oneclick = false;
      }
    });
#container {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
}

#box {  
  width: inherit;
  height: inherit;
  background-color: red;
  display: none;
}

a {
  padding: 5px;
  background-color: gray;
  color: white;
  cursor: pointer;
}

a::selection {
  background-color: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div id="box"></div>
</div>
  
<a>Click me</a>

La otra opción, no usar slideToggle.

  $('a').on('click', function() {    
      $('#box').slideDown();
    });
#container {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
}

#box {  
  width: inherit;
  height: inherit;
  background-color: red;
  display: none;
}

a {
  padding: 5px;
  background-color: gray;
  color: white;
  cursor: pointer;
}

a::selection {
  background-color: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div id="box"></div>
</div>
  
<a>Click me</a>

1
  • Es que necesito que opere más de una vez... lo que haz hecho es equivalente al evento .one().. Gracias de todas formas Commented el 13 dic. 2016 a las 22:57

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.