div on click not fired during transition - html

Question

I have a simple div with an onclick function (Note I removed the content of the svg for readability):
<div id="sidebar-toggler">
<svg></svg>
</div>
body.on('click', '#sidebar-toggler', function() {
$('#sidebar').toggleClass('collapsed');
});
this is working without a problem. But the div has also a transition to move a little to the right on hover:
&:hover
left: 30px
transition: left 0.4s ease-out
Now, sometimes (quite often) during the transition, the click event is not fired. Is this a common Problem and is there a solution to this?
What I have tried is to make a wrapper div around it, which is as big as the animations goes. But the Problem still exist.
What I have done is to add a wrapper around my round div like this:
( ) = Round div (button)
_________
| | = wrapper
_________
transition
From:
_________
|( ) |
_________
To:
_________
| ( )|
_________
And of course, I remapped the onclick to the wrapper. I though because the onclick is on the wrapper, and there is no transition on the wrapper, the onclick should be fired. But as said, no success so far.

Answer 1

This is because click is very sensitive: you must click your mouse both down and up without the element moving.
You could use a mousedown or mouseup instead:
body.on('mouseup', '#sidebar-toggler', function() {
$('#sidebar').toggleClass('collapsed');
});
That wouldn't be dependent on movement.
The same would happen if you have a onClick method on a non-moving element, but you move your mouse. It wouldn't work since it's a drag instead of a click.