Cách ngăn chặn nhấp chuột "ma" trên siêu liên kết khi chạm vào thiết bị cảm ứng

Question

Khi tôi chạm chính xác trên đường viền của thành phần thẻ a, nó kích hoạt sự kiện click, chứ không phải sự kiện touchstart. Tại sao chuyện này đang xảy ra?

Để hiển thị các vấn đề tôi đã fiddle này: http://jsfiddle.net/o8cvqL0L/8/ các a thẻ có 2 sự kiện:

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

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

Chỉ cần làm cho một liên lạc chính xác trên biên giới của các yếu tố màu vàng. Có cách nào để tránh hành vi này không?

Tôi đã thử nghiệm điều này trên Trình duyệt Android, Safari và Chrome dành cho máy tính để bàn.

Cảm ơn bạn rất nhiều!

CHỈNH SỬA: Chạm phải nằm ngoài phần tử nhưng vẫn nằm trong bán kínhX/Y của Touch để trở thành lần nhấp. Giá trị của clientX/Y và pageX/Y trong trình nghe click không đúng, hiển thị các tọa độ allways tương ứng với phần tử khi không phải vậy. (http://jsfiddle.net/o8cvqL0L/35)

Có thùng chứa với touchstart người nghe dường như làm cho những hành vi kỳ lạ này trong phần tử con biến mất và tọa độ trong đối tượng sự kiện là đúng. (http://jsfiddle.net/o8cvqL0L/42/) Sau đó, việc sử dụng ủy quyền sự kiện sẽ khắc phục sự cố, NHƯNG chỉ khi phần tử đích là div và không phải là liên kết như trong ví dụ trước của tôi. Dưới đây là giải pháp cho các yếu tố div: http://jsfiddle.net/o8cvqL0L/44/

Tôi vẫn đang tìm giải pháp cho các thẻ a và lý do được giải thích cho vấn đề này.

Answer 1

Hãy thử điều này một lần, tôi nghĩ rằng điều này sẽ giải quyết vấn đề Ur.

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

}); 

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

Answer 2

Sự kiện cảm ứng thực sự được kích hoạt trong mã bạn đã cung cấp.

Trong fiddle http://jsfiddle.net/mssavai/o8cvqL0L/34/ Tôi đã sửa đổi mã ban đầu của bạn để hiển thị đường viền xung quanh #yellow. Bạn sẽ thấy rằng việc chạm vào vùng biên giới sẽ tạo ra một touchstart.

Tuy nhiên, việc chạm vào cạnh gần đôi khi sẽ kích hoạt một nhấp chuột mà tôi nghĩ là vấn đề bạn đang gặp phải. Từ quan sát của tôi (trên Google chrome - android), điều này xảy ra nếu cảm ứng bắt đầu bên ngoài khu vực đã đăng ký và sau đó phát triển để bao phủ một phần của khu vực đó khi có nhiều áp lực hơn khi chạm vào.