Как предотвратить "призрачные" клики по гиперссылкам при нажатии на сенсорном устройстве

Когда я касаюсь точно на границе тега a, он запускает событие click, но не событие touchstart. Почему это происходит?

Чтобы показать проблему, я сделал эту скрипту: http://jsfiddle.net/o8cvqL0L/8/ тег a имеет 2 события:

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

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

Просто прикоснитесь точно к границе желтого элемента. Есть ли способ избежать такого поведения?

Я тестировал это на Android Browser, Safari и Desktop Chrome.

Большое спасибо!

Редакция: Прикосновение должно быть вне элемента, но все еще в пределах радиуса X/Y Touch, чтобы стать кликом. Значения clientX/Y и pageX/Y в прослушивателе click неверны, показывая все координаты, соответствующие элементу, когда это не так. (http://jsfiddle.net/o8cvqL0L/35)

Наличие контейнера с прослушивателем touchstart кажется причиной того, что эти странные действия в дочернем элементе исчезают, а координаты в объекте события являются правильными. (http://jsfiddle.net/o8cvqL0L/42/) Затем использование делегирования событий устраняет проблему, но только тогда, когда целевой элемент является div, а не ссылкой, как в моем предыдущем примере. Здесь решение для элементов div: http://jsfiddle.net/o8cvqL0L/44/

Я все еще ищу решение для тегов a и документированную причину этой проблемы.

Ответ 1

Событие touchstart действительно запущено в коде, который вы указали.

В этой скрипте http://jsfiddle.net/mssavai/o8cvqL0L/34/ Я изменил исходный код, чтобы отобразить рамку вокруг #yellow. Вы увидите, что касание граничной области создает сенсорный старт.

Однако при касании рядом с краем иногда срабатывает щелчок, который, по моему мнению, является проблемой, с которой вы сталкиваетесь. Из моего наблюдения (на Google хром-андроиде) это происходит, если прикосновение начинается за пределами зарегистрированной области, а затем растет, чтобы покрыть часть этой области, когда большее давление оказывает как часть прикосновения.

Ответ 2

Попробуйте это однажды, я думаю, что это решит проблему Ur.

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

});

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