Let's look at the code first:
$(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>
We see the problem if we double click.
There the animation appears and disappears at the moment and what I want is to prevent it from disappearing.
As you can see, I have tried the following code:
.dblclick(function(e) {
e.stopPropagation();
e.preventDefault();
return false;
});
I found it somewhere, but it doesn't work for me.
I also can't use the .one() handler as I need it to operate more than once.
How can you avoid double clicking on an animation in jQuery
?
I have been able to solve the problem using
.is(':animated')
and thus avoid the double click when it is in full animation .P.S. I'm willing to see other/better answers that might fix this issue
Well, I have found a way, but I don't know if it will work for you, it is to change the label
<a>
for a button:The problem is that the item
<a>
cannot be disabled, or at least it doesn't work. They comment on it in the following Stack English link .I don't know if there is any drawback with this simple way:
The other option, don't use
slideToggle
.