Как обработать событие touchstart (или touchend), если при этом не произошло событие touchmove?
Добрый день. Вопрос по мобильному сайтостроению. Возможно ли среагировать на событие прикосновения только в том случае, если не произошло события перемещения? Т.е. нужно определить, что пользователь именно кликнул по элементу, а не проскроллил страницу. Вероятно, нужна какая-то комбинация touchend И touchmove? Что-то не могу сообразить...
1) touchstart - запоминаем позицию курсора
2) touchend - вычисляем разницу между начальной позицией (которую запомнили в touchstart) и конечной позицией
3) если разница получилась меньше некоего порогового значения (например меньше 10 пикселей), значит юзер хотел кликнуть, а не скроллить
Благодарю, почти то что нужно. Дело еще вот в чем - после события touchend в мобильных браузерах, насколько я знаю, срабатывает задержка в 300мс. Так ли это, и можно ли от этого как-то избавиться? Возможно, вы в курсе.
Евгений Журов, фигня всё это, я не знаю откуда этот миф взялся, но никакой задержки лично я не замечал. Впрочем вы можете самостоятельно это проверить просто добавив пару логов для touchstart/touchend.
GreatRash, возможно, но я с чем-то подобным столкнулся. Вот тут спрашивал: https://toster.ru/q/485431, тут все подробности проблемы. Возможно, и миф, но по факту я реально столкнулся с какой-то задержкой. И так до сих пор не получилось от нее избавиться. В частности, когда заменил click на touchend и сделал реализацию по вашему совету, а также скрытые блоки сделал видимыми, но с min-height: 0, то стало чуть быстрее, но все равно с каким-то подтормаживанием. Возможно, дело все-таки действительно в том что слишком много блоков, черт его знает.
Скорее всего у вас слишком много блоков. Я не знаю какого рода у вас анимация, но учитывайте, что самая дорогая, с точки зрения производительности, операция в браузере - это reflow. Если вам нужно максимально быстрое приложение/сайт, то постарайтесь всеми возможными способами избегать лишних reflow.
Reflow - это по-русски перестроение потока элементов в DOM. Т.е. если у вас есть 100 дивов и вы поменяете, например, высоту одного из них, то браузеру придётся перестроить всё дерево. Именно отсюда возникают тормоза при анимациях. В идеале анимируемый элемент должен быть абсолютно спозиционирован, чтобы не влиять на остальное дерево.
GreatRash, понял. Да, у меня сначала анимировалось свойство display, потом я попробовал анимировать min-height. Хоть и стало получше (возможно за счет прочих оптимизаций), но все равно не фонтан. Подумаю, как еще можно ускорить процедуру, спасибо.
