Mausklick während animation verhindern
Kann man mit einem Event verhindern, dass onclick-Funktionen aufgerufen werden? Also z.B. meine Animation läuft eine Sekunde, in dieser Zeit soll ein Button nicht anklickbar sein. Ich weiß ich könnte in der Funktion, die beim Klick aufgerufen wird unterbinden, dass etwas passiert, aber ich möchte, dass die Funktion innerhalb dieser Sekunde im Hintergrund ablaufen kann, nur der Button soll nicht anklickbar sein. Eine einfache Möglichkeit fällt mir ein: eine zweite Funktion, die beim Button klick aufgerufen wird und abfragt, ob die Animation vorbei ist und wenn ja Funktion 1 aufruft, aber gibt es auch eine universelle Möglichkeit, um generell das Anklicken von Buttons zu verhindern?
Der hier verwendete Code
<style>
span{
margin:100px;
background:red;
text-align:center;
font-size:90px;
font-weight:900;
height:100px;
width:100px;
border:3px solid black;
display:inline-block;
animation:lauf 2s linear forwards infinite;
animation-play-state:paused;
}
@keyframes lauf{
0%{
transform:rotate(0deg);
}100%{
transform:rotate(360deg);
}
}
input{
width:300px;
height:40px;
font-size:35px;
box-shadow:5px 5px 5px;
}
</style>
<script src="/js_webseite/jquery.js"></script>
<div>
<span>
<>
</span>
<br>
<input id="go" type="button" value="starten">
</div>
<script>
$('#go').click(function(){
$('span').css('animationPlayState','running');
$('input').attr('value','Deaktiviert');
$('#go').prop('disabled', true)
setTimeout(function(){
$('#go').prop('disabled',false);
$('input').attr('value','Starten');
$('span').css('animationPlayState','paused');
},2000);
})
</script>