Come evitare clic "ghost" sui collegamenti ipertestuali quando si tocca il dispositivo touch

Question

Quando tocco esattamente sul bordo di un elemento tag a, si attiva un evento click, ma non un evento touchstart. Perché sta succedendo?

per mostrare il problema ho fatto questo violino: http://jsfiddle.net/o8cvqL0L/8/ il a tag ha 2 eventi:

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

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

Basta fare un tocco esattamente sul confine dell'elemento giallo. C'è un modo per evitare questo comportamento?

L'ho provato su Android Browser, Safari e Desktop Chrome.

Grazie mille!

Modificato: Il tocco deve essere al di fuori dell'elemento, ma ancora all'interno della RadiusX/Y del tocco di diventare un clic. I valori di clientX/Y e pageX/Y nel listener click non sono corretti, mostrando le coordinate di allways corrispondenti all'elemento quando non lo è. (http://jsfiddle.net/o8cvqL0L/35)

Avere un contenitore con il listener touchstart sembra far sì che questo comportamento strano nell'elemento figlio scompaia e le coordinate nell'oggetto evento siano corrette. (http://jsfiddle.net/o8cvqL0L/42/) Quindi, l'utilizzo della delega degli eventi risolve il problema, MA solo quando l'elemento di destinazione è un div e non un collegamento come nel mio esempio precedente. Ecco la soluzione per gli elementi div: http://jsfiddle.net/o8cvqL0L/44/

Sto ancora cercando una soluzione per i tag a e un motivo documentato per questi problemi.

Answer 1

Provatelo una volta, penso che questo risolva il problema di Ur.

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

}); 

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

Answer 2

L'evento touchstart è effettivamente attivato nel codice che hai fornito.

In questo violino http://jsfiddle.net/mssavai/o8cvqL0L/34/ ho modificato il codice originale per visualizzare un bordo intorno a #yellow. Vedrai che toccare l'area del bordo genera un touchstart.

Tuttavia, toccando vicino al bordo qualche volta si spara un clic, che penso sia il problema che si sta affrontando. Dalla mia osservazione (su Google Chrome - Android), questo si verifica se il tocco inizia al di fuori dell'area registrata e poi cresce fino a coprire parte di quella area quando viene esercitata una maggiore pressione come parte del tocco.