В Javascript есть только четыре события для сенсорных событий: touchstart, touchend, touchcancel и touchmove. Комбинируя их, можно контролировать то, как пользователь прикасается к экрану, и действовать соответственно. Однако обычно событие, когда программист хочет прослушивать не одно из них, а комбинацию двух или более.
Возьмем в качестве примера событие свайпа. Что потребуется для прослушивания события swipe? Возможным решением будет прослушивание событий touchstart и touchmove, проверка некоторых условий и отслеживание движения; и если он обернут в класс, вы получите инструмент, который предлагает событие смахивания, как черный ящик.
Такой служебный класс может прозрачно обрабатывать событие swipe и может использоваться везде, где это необходимо. В этом примере я объясню класс Swipe Event с помощью JavaScript, полный код можно найти здесь.
Класс для события слайда
Для каждого события касания высокого уровня должен быть создан служебный класс. В этом случае SlideEvents будет служебным классом для обработки событий слайдов в контейнере. В частности, событие слайда, определенное этим классом, будет определять, проводит ли пользователь пальцем вправо или влево по определенному контейнеру, и если это так, класс будет вызывать метод каждый раз, когда палец скользит по экрану.
Помимо прослушивания событий turchstart и события touchmove, необходимо проверить некоторые условия, чтобы определить, произошло ли событие скольжения в области контейнера и по горизонтали.
Обработчики первичных сенсорных событий, связанных с событием слайда
Во-первых, для каждого основного события касания, участвующего в событии касания высокого уровня (событии слайда или любом другом), должен быть создан обработчик. В этом случае методы handleTouchMoves и handleTouchStart отвечают этой потребности. Связь между изолированными первичными событиями должна поддерживаться с помощью атрибутов класса.
Когда запускается событие touchstart, его обработчик регистрирует координаты, где пользователь касается экрана в первый раз, и предыдущая точка будет инициализирована в координате X начальной точки.
Каждый раз, когда пользователь перемещает палец по экрану, оценивается, движется ли пользователь влево или вправо. Если пользователь скользит по горизонтали, событие смахивания запускается путем вызова метода, переданного в качестве параметра классу при его создании; но сначала необходимо рассчитать расстояние, пройденное с момента последнего инициированного события, используя предыдущую точку и текущую точку.
Конструктор
Конструктор класса получит два параметра: идентификатор контейнера и метод, который будет вызываться при возникновении события скольжения. Конструктор также инициализирует необходимые атрибуты и присваивает «this» методам, которые его требуют. Наконец, во время инициализации класса будут добавлены соответствующие обработчики для первичных событий, связанных с высокоуровневым событием касания определенного контейнера.
Как использовать
Использовать класс очень просто; просто инициализируйте объект с идентификатором контейнера и методом, который должен быть запущен, если событие слайда прослушивается таким контейнером.
Заключительные соображения
Обычно нет необходимости переопределять какое-либо поведение касания для обычных сенсорных веб-приложений, но есть очень специфические случаи, когда необходимо настроить реакцию приложения на касания пользователя. Если это так, то смешивание сенсорных событий с другой логикой программирования вредно, поэтому важно найти решения, которые сделают код как можно более чистым. Этот подход позволяет настраивать сенсорные события любой сложности, которые можно повторно использовать, когда это необходимо, и любым количеством контейнеров.
