 SOLVED! See my followup post I ran into a weird issue at work that ate up a few hours the other day. I was implementing a simple toggle button in React and if I clicked it say 10 times in 5 seconds, only ~9 of the times would register. I did a performance audit and it turned out that onclick was occasionally not firing, but onpointerup consistently worked. So I bound the eventlistener to onpointerup, which solved the problem but... what could be the root issue? Any ideas? 13 comments | Expand all CWs
  Uhm… did you try with different clicking devices, just to be sure it's not a mouse issue? Sounds odd… but at least you can exclude that. @darius In case your bug only repros in Chrome and not in Firefox, you may be running into this bug: https://bugs.chromium.org/p/chromium/issues/detail?id=716694 @annmygdala we have a winner! just tested and I can't reproduce in firefox, and this is exactly the situation I'm in Thanks to @annmygdala. This Chrome bug is what I'm running into. I cannot reproduce it on Firefox, and I am in fact changing the visual state of the button by removing and reattaching an icon, so, this has gotta be it: https://bugs.chromium.org/p/chromium/issues/detail?id=716694  |
Gregory's Server
@darius one common cause for this is that your pointer has moved slightly during the click and is no longer over the element - which may have moved or transitioned or had a state change during the event. onclick requires both a down and an up on the same element to fire.