We have an issue where click events on an element in our page are firing on a different element from the element that was tapped. The two elements are siblings in the page, therefore it is not related to event propagation. e.g.,
<div class="a">Element A</div>
<div class="b">Element B</div>
We attached a click handler to element A. But when we tapped on element B, the client handler for A would fire. It is very hard to explain why this is happening, but it seems like there is some kind of heuristic matching going on.
We also found that by tracing touch and click events, that the touchstart and touchend events for the tap were firing on element B, but that the click event was firing on element A.
We found that the problem seems to have been caused by a feature in chromium called "touch adjustment". You can see a short explanation of touch adjustment in chrome://flags:
Disable touch adjustment. Windows, Linux, Chrome OS, Android Disables touch adjustment support. Touch adjustment is the process of refining the position of a touch gesture in order to compensate for touches having poor resolution compared to a mouse. #disable-touch-adjustment Enable
It seems that when touch adjustment is enabled (the default), that touch events on one element will sometimes be synthesized into a click event on a different element that is nearby the element that you tapped on.
Touch adjustment can be disabled in chrome://flags, or by passing the command line parameter --disable-touch-adjustment.