Отже, чим ми можемо скористатися, щоб визначити спробу користувача зробити на сенсорі екрану дійство, яке традиційно називають swipe. Використовуючи наш попередній досвід, можемо визначити події дотику до сенсора, а так само одночасний "розмах" пальцем на сенсорі.
Як правила, давайте уточнимо, який рух по сенсорної поверхні ми будемо розглядати в якості команди swipe. У цій дії будуть причетні дві змінні, це відстань, яку проходить пальцем по осі x або y, від моменту виникнення події touchstart до моменту touchend, а так же час, потрібний для цього дії. Використовуючи ці дані, ми можемо вирішити, чи провадив користувач дію, про який ми говоримо, чи ні.
Методом проби, ми можемо визначити середнє значення, яке проходить палець по сенсора для цього дії по горизонталі і вертикалі. Що стосується переміщення пальця по горизонталі, то значення відстані приблизно однакові, проте при переміщенні з ліва на право, швидкість значно вище, приблизно на 200 мс. Що стосується вертикалі, тут переміщення пальця по сенсора рекомендується визначати за умови не більше 100px, щоб не заважати іншим командам, внаслідок чого при цьому можуть бути проблеми з помилковим спрацьовуванням.
Приклад визначення команди «swipe» в від лівого боку в праву (Для пристроїв, не оснащених сенсором, так само в прикладі реалізований симулятор для звичайної комп'ютерної миші).
За подією touchend ми перевіряємо, що відстань, за яке пройшов покажчик на сенсорі від моменту події touchstart до touchend є позитивним числом, вище заданого порогу значення, в нашому випадку це 150. У той же час, ми відсіюємо можливе вертикальне рух менш 100px. Так як вертикальне переміщення курсору може бути вище початкової точки або нижче, ми використовуємо Math.abs ().
Загальна функція визначення команди swipe.
В наведеному вище прикладі ми розглянули визначення команди swipe на сенсорних пристроях в напрямку правого боку. Крім цього можна визначати напрямок курсору на всі 4 сторони (вправо, вліво, вгору і вниз).
Приклад визначення команди «swipe» в будь-якому напрямку (для пристроїв, не оснащених сенсором, в прикладі реалізована підтримка звичайного курсору миші).
Код з прикладу визначення «swipe» на сенсорі в 4 напрямках:
Ми пов'язуємо функцію swipedetect () для блоку з id # touchsurface2. при виникненні дії swipe проводитися зміна фонового зображення блоку div, таким чином, показуючи напрям руху пальця.