Обробка подій тачскринів на JavaScript
Почнемо з найпростішого – поворот екрану. При повороті екрана об'єкту window передається подія наorientationchange. У обробнику події перевіряються значення clientWidth і clientHeight, на підставі їх співвідношення визначається вертикальне або горизонтальне положення екрана. Використання цих значень дозволяє позбутися специфічних для різних браузерів значень типу screen.orientation. Для максимальної підтримки різних браузерів, обробник повороту треба дублювати обробником події onresize - зміна розмірів вікна браузера.
Натискання на екран, відпускання і перегортання генерують кілька подій типу TouchEvent, а саме ontouchstart - натискання (палець торкнувся екрана), ontouchmove - переміщення натискання, ontouchend - завершення натискання (палець прибраний від екрана). Залежно від поставленого завдання, нам треба реалізувати потрібні обробники. Але перед цим небагато теорії. Усі перелічені події мають такі характеристики:
Властивість об'єкта TouchEventОписtouchesВсі натисканняtargetTouchesВсі натискання в межах елемента, в якому відбулася подіяchangedTouchesЗмінилися натискання з моменту останнього натискання (це корисно застосовувати в обробниках ontouchmove і ontouchжа> них колекцій властивостей Touch , своєю чергою, має властивості, якими можна точно відстежити координати натискання і елементи web-сторінки, у яких ці натискання сталися.
Властивість об'єкта TouchОписclientX, clientYКоординати натискання щодо меж видимої області браузераscreenX, screenYКоординати натискання щодо меж екранаpageX, pageYКоординати натискання щодо меж web-сторінки, включаючи позицію вертикальної та горизонтальної прокруткиidentifierЧисловоюідентифікатор натискання для його відстеження між подіямиtargetЕлемент web-сторінки, в межах якого відбулася подія Обробник події прив'язується до документа цілком або до конкретного елемента web-сторінки, який повинен відповідати за взаємодію з тачскрином. Наприклад, смуга прокручування або область з контентом, що перегортається.
Таким чином можна відстежувати як множинні, так і поодинокі натискання. В останньому випадку не обов'язково перебирати весь масив, достатньо отримати координати лише об'єкта з нульовим індексом.
Наступна дія – перетягування об'єктів. Якщо на стаціонарних комп'ютерах це було досить складно реалізувати, то на мобільних пристроях із тачскринами перетягування елементів web-сторінки реалізується буквально декількома рядками коду. Все засноване на подію ontuchmove.
Для відстеження моменту, коли палець буде відпущений, використовується подія ontouchend. У цьому обробнику можна відстежити, які змінилися натискання і виконати відповідні дії.
Ну і останнє на сьогодні – гортання. Це комбінована подія, що починається з натискання і закінчується зсувом натискання ліворуч або праворуч на певну відстань. Для визначення відстані при початковому натисканні треба зберегти координати події, а в обробнику руху відстежувати різницю між поточними та збереженими координатами натискання. Як тільки різниця перевищуватиме певне значення, подію перегортання можна вважати такою, що відбулася. Напрямок перегортання визначається за тим, більше або менше поточних координат збережених.
Природно, напрямок гортання може бути не тільки горизонтальним, а й вертикальним, і навіть діагональним. Для цього досить просто відслідковувати необхідні координати по вертикалі та/абогоризонталі.
На демонстраційній сторінці ви можете переглянути всі описані дії: обробку повороту екрана, перетягування елементів, мультитач та літстанія. Дивитися сторінку треба з мобільних пристроїв, на стаціонарних комп'ютерах нічого не працюватиме.