Почему по событию TAP не работает preventDefault ?????

Question

[Cheizer]

Друзья, уперся рогом и все, не понимаю, почему по событию TAP не срабатывает preventDefault? По ссылке по click порядок, а вот с TAP проблема, как быть? В чем соль?

$(document).ready(function() {

//c этим проблема	
$(".example2").on('tap', function(e){
e.preventDefault();
alert('не прошли по ссылке');
});

//c этим проблем нет
 $(".example1").on('click', function(e){
e.preventDefault();
alert('не прошли по ссылке');
});   
  
});

Вот на CODEPIN пример сделал https://codepen.io/Cheizer/pen/LeOYXj

Comments

[Cheizer]

Как запретить переход по ссылке при варианте с TAP ? Аналогично как делает preventDefault для click!

Answer 1

[Dark Hole]

Потому, что событие tap не возникает

Comments

[Cheizer]

всмысле? :) На мобилке тоже не работает

[Dark Hole]

Роман Кузнецов, алерта нет, события, стало быть, тоже. А на мобилках codepen не работает

[Cheizer]

Dark Hole, работает codepen на мобиле, вы что, только проверял. а проблема в том и есть, ПОЧЕМУ СОБЫТИЯ НЕТ КОГДА ДОЛЖНО БЫТЬ, tap это событие тоже.

[Dark Hole]

Роман Кузнецов, плохо работает. Итак. Вопрос. На мобиле вы видете алерт?

[Cheizer]

Dark Hole, нет, все так же, событие preventDefault не блокирует событие tap

[Dark Hole]

Роман Кузнецов, значит, событие не возникает

[Cheizer]

Dark Hole, событие возникает, если поменять тег a на div, работать будет, тут суть не в событии TAP, а в preventDefault!!!!!

[Dark Hole]

Роман Кузнецов, на div нет дефолтного поведения, а tap не возникает, по всей видимости. Такие дела

[Kovalsky]

Роман Кузнецов, вам всё правильно подсказывают: событие tap не возникает потому что такого события вообще не существует.

[Cheizer]

Никита Полевой, Оке, тогда как запретить переход по ссылке при варианте с TAP ? Аналогично как делает preventDefault для click.

[Cheizer]

Никита Полевой, и все таки вы не правы, TAP это событие, только другое, событие касания пальцев api.jquerymobile.com/tap

[Kovalsky]

Роман Кузнецов, ну, вы же понимаете, что событие click это просто фича которую вам предоставляет браузер? Разработчики браузера могли бы вполне обойтись событиями mousedown и mouseup, а вам бы как пользователю пришлось бы самому реализовывать click как последовательные mousedown и mouseup на одном и том же элементе (такого не произошло вероятно из-за того что click есть в спецификации). С touch-событиями немного другая история: tap в спецификацию не вошёл, зато туда вошли touchstart, touchend, touchcancel и touchmove.

"TAP это событие, только другое, событие касания пальцев" - фишка в том, что других событий нет. Есть только те которые объявлены в спецификации, о них вы можете почитать по ссылке. А вы дали мне ссылку на событие tap из библиотеки jQuery mobile, там она реализована кастомно; с вероятностью в 99% что это (как я описал выше) просто touchstart и touchend на одном элементе. Кстати, tap в вашем бы примере тоже работал если бы вы подключили jQuery mobile.

А вы уверены, что вам нужен tap? Разве с кликом бывают проколы? Просто насколько я знаю все тачи по спецификации обязаны эмулировать click, таким образом вам вполне должно быть достаточно click.

ЗЫ: с предпоследнего айфона клик в вашем примере нормально работает, проверено только что.

[Cheizer]

Никита Полевой, Спасибо за информацию, но клик на мобилке ужасен!
Уже не по теме н овсе же, представьте экран мобильника и фото например в 100% по ширине, вертикальная цепочка , друг за другом идут, по клику увеличивается, если на pc это нормально, ты прокручиваешь экран скролом мыши или скрол баром, то на мобиле ты прокручиваешь касанием, так вот это касание происходит по самим фото, и часто срабатывает этот гребаный клик когда просто прокручиваешь, и вообще, сейчас уже считаю не учитывать такие вещи это дурной тон в разработке. Я внедряю hammer.js для жестов. И все клики просто заменяю на tap, но вот есть нюансы как в моем вопросе сверху.

[Kovalsky]

Роман Кузнецов, почему не по теме, я из этого наконец понял о чем речь. Только не смог на айфоне воспроизвести - взял ваш пример, попытался покрутить и подумал что клик будет срабатывать при прокрутке, но не сработал ни разу. Так что видимо у вас какой-то специфический случай, думаю вам стоит сделать пример в котором вы воспроизведёте проблему.

[Cheizer]

Никита Полевой, вот пример, откройте на мобиле два сайта, этот обычного лайтбокс плагина ilightbox.net
и этот витрина товаров собранный для примера на онлайн конструкторе, который использует скрипт hammer.js для отслеживания действий для сенсорных устройств shoper.tilda.ws/page2103285.html
Откройте на мобиле оба их, намочите пальцы для большей чувствительности сенсора, и потаскайте вверх вниз места где фото. На одном просто галереи, на другом товары, потаскайте - поделайте "свайпы" вверх вниз экран прямо по этим картинкам, и вы поймете, что на первом сайте лайтбокса срабатывает "ложный" клик когда он не нужен, клик не понимает что было, легкий "свайп" или "тап", когда на втором хрен такого ложного касания может быть, как медленно или нежно не делай свайп, он конкретно понимает тап и свайп. То есть именно то что нужно пользователю. Вы можете сказать что это все мелочи, и херня, в таком случае мне с вами разговаривать не о чем.

[Dark Hole]

Роман Кузнецов, вернемся к нашим баранам. tap - кастомное событие, не имеющее дефолтного поведения. preventDefault поэтому не работает(если событие возникает, конечно).

[Cheizer]

Dark Hole, :))) мне нравится ваша заинтересованность! Да, не получится, preventDefault для clicka только.
Много подобного моему вопросов в инете про это нашел, предлагают решение:

$.fn.tap = function(f) {
  $(this).on('tap', function(e) {
    e.preventDefault();
    f();
  });
  return this;
};

//usage
$('.selector').tap(function() {
  alert('foo bar');
})

Но я не понял его, все равно по ссылке переход есть, ну я уже разобрался со своей темой, делаю проверку, был клик или тап, вопрос больше не актуален. Спасибо большое за внимание!!!