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

Question

[sqr_behr]

Написал слайдер на нативном JS. Но столкнулся с проблемой жестов на мобильных устройствах. Решения, которые находил базировались на том, что необходимо выключать стандартное поведение эвентов touchstart и touchmove, а затем уже писать свой свайп на ось X и, соответственно, скролл по свайпу в отношении оси Y. Есть ли другие решения этой проблемы? Сторонние библиотеки прошу не советовать. Моя задача состоит в том, чтобы понять механику жестов.

Comments

[Kovalsky]

Дело в том, что если речь о таче, то жест это довольно широкое понятие. Например, жест это когда вы нарисовали пальцем пентаграмму и ваш слайдер вывел в консоль "hail satan". Вам нужны такие сложные жесты или вы говорите только о горизонтальных свайпах?

[sqr_behr]

Никита Полевой: на данный момент я имею в виду только горизонтальный свайп. Также, полагаю, что осознание этой механики даст мне, скажем так, буст для понимания жестов на более глубоком уровне.

[Kovalsky]

sqr_behr: нууу, на самом деле обработка горизонтального/вертикального свайпа это довольно просто по сравнению с обработкой жестов: если для обработки свайпа достаточно банально сравнивать начальное и актуальное положения тача, то обработка жестов это вообще сложная задача у которой есть несколько решений. То есть по-моему эти задачи очень разные, решение одной не даст вам никакого понимания для решения другой.

Ну да не важно.

Посмотрите например как в слике реализована обработка свайпов: опираясь на начальное и актуальное положение тача вычисляется арктангенс, представляющий собой направление свайпа - влево или право и вверх или вниз. В конце свайпа алгоритм в зависимости от длины свайпа решает переключить слайд или нет. Вот и всё.

[sqr_behr]

Никита Полевой: а каким образом решается проблема вертикального свайпа для пролистывания мимо этого слайдера?

[Kovalsky]

sqr_behr: алгоритм можно подглядеть в коде слика в методах swipe*, я дал ссылку.

[sqr_behr]

Никита Полевой: спасибо, посмотрю)

Answer 1

[Shemil]

Pointer events
Pointer Events Polyfill
Лекции из ШРИ