Mausklick während animation verhindern

olaf2500 · 7. Juni 2018

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 einfach Möglichkeit fällt mir ein: eine Zweite Funktion, die beim Button klick aufgerufen wird und abfrägt 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?

basti1012 · 7. Juni 2018

So in der Art könnte man es machen

https://codepen.io/basti1012/pen/YvGLoG

Es gibt aber noch reichlich andere möglichkeiten den Button zu sperren,jenachdem was du genau vorhast

Arne Drews · 7. Juni 2018

Dazu benötigt man nicht zwingend JavaScript:

Code

<div class="wrapper">
  <div class="box"></div>
</div>

Code

.wrapper {
  display:flex;
  justify-content:space-around;
  align-items:center;
  height:100%;
}

.box {
  background:#9cf;
  height:200px;
  width:200px;
  border:3px solid #369;
  animation:rtate 3s ease infinite;
}

.box:hover { animation-play-state:paused; }

@keyframes rtate {
    0% { background:#9cf; transform:rotate(0deg); }
   50% { background:#369; }
  100% { background:#9cf; transform:rotate(360deg); }
}

Alles anzeigen

Pausiert, wenn man mit dem Zeiger auf dem animierten Objekt ist, see in action: https://codepen.io/anon/pen/gKLOKJ

Kommt natürlich wie gesagt immer auf den Anwendungsfall an. Wenn man übe ein Schaltfläche gehen will, ist JS natürlich cleverer.

Mausklick während animation verhindern

Jetzt mitmachen!

Teilen