I have a react component that should behave the following way:
- When the user swipes over it, it should only fire swipe related events (provided by libraries such as react-swipeable, react-use-gesture, react-easy-swipe, etc), and never fire onClick.
- When the user clicks on the element, it should fire onClick only.
I am having no issue with #2, but #1 seems to always fire the onClick if the swipe event ends inside of the element.
No matter what library I use, it seems that if I swipe and release the mouse inside of the element, the onClick is fired. Even though the swipe events always fire first, event.stopPropagation, event.nativeEvent.stopImmediatePropagation, and event.preventDefault do not stop the click event from firing.
Am I misunderstanding the purpose of stopImmediatePropagation? Doesn't it stop all events that occur after the event it is called in?
I have made a code sandbox with three squares that fire swipe events using the above libraries, and each of them also fire onClick events after being swiped on and releasing the mouse inside of the elements.
Are there any other approaches I can use to stop the onClick events from firing?