UX tip on mouse event timeouts

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

Hi 👋
I’m Andy, a freelance web designer

I’m not currently booking new projects, but you can support my work by buying “Every Layout”.

Buy Every Layout