How to prevent "ghost" clicks on hyperlinks when tapping on touch device

Question

When I touch exactly on the border of an a tag element, it triggers a click event, but not a touchstart event. Why is this happening?

To show the problem I made this fiddle: http://jsfiddle.net/o8cvqL0L/8/ the a tag has 2 events:

$('#yellow').on('touchstart', function(e) {
    alert('touch');
    e.preventDefault();
});

$('#yellow').on('click', function(e) {
    alert('click');
});

Just make a touch exactly on the border of the yellow element. Is there any way to avoid this behaviour?

I tested this on Android Browser, Safari and Desktop Chrome.

Thank you very much!

EDITED: The touch must be outside of the element but still within the radiusX/Y of the Touch to become a click. The values of clientX/Y and pageX/Y in the click listener are not right, showing allways coordinates corresponding to the element when it´s not so. (http://jsfiddle.net/o8cvqL0L/35)

Having a container with touchstart listener seems making that these weird behaviour in the child element disappear, and the coordinates in the event object are right. (http://jsfiddle.net/o8cvqL0L/42/) Then, using event delegation fixes the issue, BUT only when the target element is a div and not a link like in my previous example. Here the solution for div elements: http://jsfiddle.net/o8cvqL0L/44/

I´m still looking for a solution for a tags and a documented reason for these issue.

Answer 1

The touchstart event is actually fired in the code you provided.

In this fiddle http://jsfiddle.net/mssavai/o8cvqL0L/34/ I have modified your original code to display a border around #yellow. You'll see that touching the border area generates a touchstart.

However, touching near the edge will sometimes fire a click, which I think is the issue you are facing. From my observation (on Google chrome - android), this occurs if the touch begins outside the registered area, and then grows to cover part of that area when more pressure is exerted as part of the touch.