Search code examples
javascriptreactjsanimationmouseevent

handle click on a moving animation

I have a button with ripple effect. That button have mouseUp, mouseDown and onClick handlers. And when i click on a button ripple effect starts and everything is ok.

Example

But when i click again, while ripple is still moving (on the area of a ripple), only mouseUp and mouseDown trigger (onClick doesn't). Is that ok?

Thank you.

Code source: https://codesandbox.io/s/currying-fast-d42xp?file=/src/RippleButton/index.tsx

Solution

  • Simply add in CSS pointer-events: none; to your .ripple.
    The ripple does not need any pointer events since it's simply used for animation effect purpose.