
Ask HN: Button UI behaviour - FiatLuxDave
I have observed a certain behaviour with on-screen buttons in a number of different environments (Android, PC, Browser) which perplexes me, and I&#x27;m hoping someone on here can explain it to me.  I&#x27;m not a UI developer, but I did try googling before asking with no luck.<p>The behaviour is that when clicking on a button quickly, the button visually registers the click (by depressing or changing shading) but the action intended to be initiated by the button does not occur.  This occurs intermittently - most of the time the button works normally.  I suspect that it is occurring because of a debouncing algorithm which checks that the button is depressed for longer than a certain amount of time before counting it as &quot;pressed&quot;.  However, if that is the case, then why does the button appear to be depressed when it has not been clicked long enough to activate?<p>I&#x27;m sure I can&#x27;t be the only person who has seen this phenomenon.  Can any of the UI experts on here shed any light?
======
Nadya
Check the css for `:active` as the button is being styled for `:active` which
doesn't care if the Javascript functionality takes place or not. If you
debounce the Javascript to prevent the action from firing multiple times that
doesn't stop you from clicking the button and setting it to the `:active`
state causing the styles to occur.

Codepen example:
[https://codepen.io/anon/pen/bvGrKY](https://codepen.io/anon/pen/bvGrKY)

Click the button as much as you like - after 200 milliseconds you'll get a
single alert but the `:active` style always applies on click.

------
daffodil-11
I was puzzled by this recently and found it was due to slight mouse movement
between the click and release. I can't remember the exact context but it was
related to items that were drag-and-drop enabled. The press-to-select, move to
drag, release-to-drop interaction was taking precedence over the press-release
to click the button, even when the movement/drag was tiny, only a couple
pixels.

I can't think of an instance where I would dragging-and-dropping a button,
maybe it was an anchor element or something else clickable, but perhaps it's
an avenue to investigate.

------
pedalpete
Can you post a link or a video, some images? I'm not sure I'm understanding
the behavior you are describing

~~~
FiatLuxDave
It is very intermittent, and I don't usually record all my clicks, but I will
try to catch it somehow.

