Почему меню не работает на мобильном?

Question

[Конан Варвар]

Всем привет.
У меня есть такое меню. Все работает отлично. Но когда открываю в кроме через эмулятор телефона, меню перестает работать. В чем может быть проблема?

Answer 1

[Kovalsky]

На тач устройствах нету полноценных событий мыши, это всё только эмуляции событий. Например, в браузере на десктопе mousedown триггерится когда вы нажимаете кнопку мыши, а mouseup - когда отпускаете кнопку мыши. А тач устройство 1) перед любым из тач событий подождёт ~0.3 секунды чтобы определить собирается пользователь реализовать tap или swipe, и 2) триггерит оба события mousedown и mouseup (в правильной последовательности) после tap.

В общем стоит дублировать нужный функционал для аналогичных тач событий - touchstart, touchmove, touchend.

Comments

[Конан Варвар]

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

[Kovalsky]

JaredWinter: ну, дебаг вам удастся лучше чем мне, это ведь ваш код. Ошибка в getItemX, вы пытаетесь получить свойство left у несуществующего объекта. Надо смотреть, почему объекта не существует, какой в функцию передан индекс и так далее.

К тому же дублировать функционал это не значит просто вешать те же обработчики на все события. В обработчики для разных событий передаются разные объекты ивентов, из тач событий вы не достанете нужные данные тем же медотом что и из событий для мыши. Можете например посмотреть как в моём слайдере это реализовано. Это не лучший пример, но всё же из него видна специфика.

Answer 2

[Astrohas]

Вообще юзайте https://github.com/pukhalski/tap

Comments

[Kovalsky]

Выглядит и правда неплохо. Но я так понял эта штука позволяет кроссплатформенно обрабатывать только tap. Touchstart и touchend она не обрабатывает, да?

[Astrohas]

Никита Полевой: эта библиотека предоставляет событие tap, которое может использовать и клик и touchevents. Главное преимущество - это отсутствие 300ms задержки для touchevents

[Kovalsky]

Хасан Истамкулов: понятно. А как этой штукой пользоваться-то вообще? У меня например всё равно задержка есть. Вот сделал пример, у блока "has no delay" задержка убрана с помощью touch-action: manipulation, а блок "has delay" не изменён, то есть должен иметь дефолтную задержку для тача. На window висит нативный touchstart который начинает отсчёт времени, а обработчик для tap на обоих блоках выводит разницу во времени, то есть задержку. Так вот вроде Tap никак не влияет на задержку, в блоке "has delay" всё равно задержка >=300ms, или я неправильно его готовлю