[Webkit-unassigned] [Bug 139221] New: "Ghost" click triggered on other element than corresponding touch events

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=139221

            Bug ID: 139221
           Summary: "Ghost" click triggered on other element than
                    corresponding touch events
    Classification: Unclassified
           Product: WebKit
           Version: 528+ (Nightly build)
          Hardware: All
                OS: All
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Event Handling
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: azulverdosoff at hotmail.com

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)

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20141203/df85d608/attachment-0002.html>