Handle mouse down/up and click events once with React Hooks
The issue
Sometimes you need to make a button
clickable with click and mouse down or mouse up actions.
The first solution that comes to mind would be to add only one event listener onMouseDown
/onMouseUp
but without an onClick
event listener the element is not accessible anymore. It's now hard to click for people with disabilities or with keyboard navigation.
If we set both onMouseDown
/onMouseUp
and onClick
event listeners, the common click handler function would be called twice with a mouse. So we have