div auf Klick nicht während des Übergangs gefeuert

Question

Ich habe eine einfache div mit einer Onclick-Funktion (i Hinweis für die Lesbarkeit zu Inhalt des svg entfernt):

<div id="sidebar-toggler"> 
    <svg></svg> 
</div> 

body.on('click', '#sidebar-toggler', function() { 
    $('#sidebar').toggleClass('collapsed'); 
}); 

dies ohne ein Problem ist Workin. Aber die div hat auch eine traqnsition ein wenig nach rechts auf schweben zu bewegen:

&:hover 
    left: 30px 
    transition: left 0.4s ease-out 

Nun, manchmal (sehr oft) während des Übergangs, das Click-Ereignis nicht ausgelöst wird. Ist das ein häufiges Problem und gibt es dafür eine Lösung? Ich habe versucht, einen Wrapper div arround zu machen, der so groß ist wie die Animationen. Aber das Problem existiert immer noch.

Was ich getan habe ist eine Wrapper-arround meine Runde div wie folgt hinzuzufügen:

() = Round div (button) 
_________ 
|  | = wrapper 
_________ 

transition 
From: 
_________ 
|() | 
_________ 
To: 
_________ 
| ()| 
_________ 

Und natürlich remapped ich die Onclick an den Wrapper. Ich denke, weil der onclick auf dem Wrapper ist, und es gibt jetzt Übergang auf dem Wrapper, der onclick sollte gefeuert werden. Aber wie gesagt, bisher kein Erfolg.

Answer 1

Dies ist, weil click ist sehr empfindlich: Sie müssen Ihre Maus beide und oben ohne das Element bewegen.

Sie könnten einen mousedown- oder mouseup statt:

body.on('mouseup', '#sidebar-toggler', function() { 
    $('#sidebar').toggleClass('collapsed'); 
}); 

, die nicht auf Bewegung angewiesen wäre.

Das gleiche würde passieren, wenn Sie eine onClick Methode auf einem nicht beweglichen Element haben, aber Sie bewegen Ihre Maus. Es würde nicht funktionieren, da es ein Ziehen statt eines Klickens ist.