Bug 139221 – "Ghost" click triggered on other element than corresponding touch events

• Component: UI Events
• Status: NEW

[Amaya]

Tapping sightly next to an element (when the element is still within the touch-area-radius) causes triggering of a ghost click event inside the element, while the corresponding touch events are triggered on the element that is in the center of the touch point.

I don´t know if this click near an element is deliberated to facilitate the interaction with taps. I haven´t found this documented anywhere and it causes various problems such as:

It is impossible to prevent the click with preventDefault() for an element, because the touchstart will be raised outside of the element, while the mouse events are raised inside the element. So a touchstart listener on the element itself that calls preventDefault() will not prevent this ghost clicks. This is especially problematic because calling preventDefault on touchstart/touchend seems to be the recommended behavior on many pages to avoid clicks.

The coordinates provided by the event object (clientX/Y, PageX/Y) have wrong values, as it indicates a position inside of the element when the center of the touch is outside of the element. There is also a visible "jump" in coordinates, when the center of the touch reaches the element. So in this cases tapping next to an element on the right side can actually have a lower X value as a tap inside the element.

Here is a fiddle where the problem can be tested
http://jsfiddle.net/o8cvqL0L/8/

It is very easy to reproduce this behaviour using the touch emulator in Chrome. Just tap near the element edge and watch the events when tapping inside/outside of the element.

Related stack overflow posts:
http://stackoverflow.com/questions/27225577/how-to-prevent-ghost-clicks-on-hyperlinks-when-tapping-on-touch-device
http://stackoverflow.com/questions/25671053/e-preventdefault-not-bulletproof?lq=1 (possibly)