UX tip on mouse event timeouts

ℹ️ UX Tip permalink

If you're making a whole element clickable, like say, a card: consider creating some sort of timer on 'mousedown' that is reset on 'mouseup'. This means that you can see if the timer has run past a threshold and block the action on 'click'.

One reason you would do this is to allow content in that card to be selectable without the click handler firing off and disrupting the action.

Demo: https://codepen.io/hankchizljaw/details/wEWNKe