Что значит несколько элементов с поддержкой касания

Свойство touch-action CSS

Дата публикации: 2017-05-11

От автора: свойство touch-action CSS определяет, может ли пользователь взаимодействовать с элементом на экране с помощью касаний, используя стандартные возможности браузера, а также как это будет происходить. Например, панорамирование и зум.

События касаний – это Web API, позволяющее браузеру интерпретировать действия пальцами или стилусом на сенсорном экране или трекпаде. Обычно события касаний мы обрабатываем через JS, однако touch-action позволяет информировать браузер о намерениях приложения еще до срабатывания обработчиков событий.

Результат касания элемента зависит от значения свойства touch-action и стандартных настроек касания элемента и его предков. Разработчики могут выборочно отключать стандартное поведение при касании экрана, предотвращая тем самым отправку, если поведение не требуется.

Свойство touch-action применяется только к элементам, которые поддерживают оба CSS-свойства width и height. Элементам без явно прописанных размеров типа span можно задать свойство display в значение, поддерживающее width и height, например, block.

Синтаксис

Синтаксис: touch-action: auto | none | [ [ pan-x | pan-left | pan-right ] || [ pan-y | pan-up | pan-down ] ] | manipulation

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Изначально: auto

Применяется к: всем элементам кроме: незаменяемых инлайновых элементов, строк таблиц, групп строк, колонок таблиц и групп колонок

Анимируется: нет

Значения

auto. Значение по умолчанию. Браузер пользователя может определить разрешенное поведение при касании элемента.

manipulation. На элементе разрешено панорамирование и зум пальцами. Можно считать сокращением для pan-x pan-y pinch-zoom. Дополнительные нестандартные жесты типа двойного тапа запрещены.

none. На элементе запрещены стандартные поведения при касании.

pan-x. Разрешено панорамирование пальцами по оси Х. Можно совместить с pan-y, pan-up, pan-down и зумом пальцами. См. официальный синтаксис.

pan-y. Разрешено панорамирование пальцами по оси Y. Можно совместить с pan-x, pan-up, pan-down и зумом пальцами. См. официальный синтаксис.

pan-left. Панорамирование пальцами разрешено только, если действие начинается с панорамирования влево. То есть пользователь перемещает палец вправо. После начала прокрутки направление можно изменить на противоположное.

pan-right. Панорамирование пальцами разрешено только, если действие начинается с панорамирования вправо. То есть пользователь перемещает палец влево. После начала прокрутки направление можно изменить на противоположное.

pan-up. Панорамирование пальцами разрешено только, если действие начинается с панорамирования вверх. То есть пользователь перемещает палец вниз. После начала прокрутки направление можно изменить на противоположное.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

pan-down. Панорамирование пальцами разрешено только, если действие начинается с панорамирования вниз. То есть пользователь перемещает палец вверх. После начала прокрутки направление можно изменить на противоположное.

pinch-zoom. Разрешен зум несколькими пальцами. Можно совместить с pan-x, pan-left, pan-right, pan-y, pan-up, pan-down. См. официальный синтаксис.

Примеры

По умолчанию в браузере заданы жесты касаний, но иногда бывают элементы со своим кастомным функционалом зума или перетаскивания. Отключить стандартное поведение браузера можно с помощью значения none.

Источник

Что дает количество касаний в сенсоре экрана смартфона

Мультитач в смартфоне или планшете – это функция, позволяющая одновременно передавать управляющие данные в операционную систему от нескольких прикосновений к сенсорному дисплею.

Характеризуется максимально возможным количеством таких касаний. В современных устройствах оно, как правило, равно пяти либо десяти.

Зачем это нужно

Даже если вы в первый раз слышите слово «мультитач», это вовсе не означает, что вам не приходилось с ним встречаться. Многие распространенные действия, совершаемые пользователем смартфона, так или иначе используют данную технологию.

Управление первых КПК было построено по аналогии с десктопными системами: виртуальная либо физическая клавиатура, система меню, диалогов и прочие элементы настольных операционных систем.

Всё это было жутко неудобно, поэтому с развитием технологий производства сенсорных дисплеев появлялись и новые методы управления.

Например, набор текста с использованием swype-клавиатуры существенно превосходил по скорости и комфорту обычный, хотя и требовал времени на привыкание.

Очень скоро в интерфейс операционной системы были введены т.н. гестуры (gesture) или, говоря правильнее – жесты. Благодаря этой технологии быстро удалось избавиться не только от большинства физических, но и от части виртуальных кнопок.

Чтобы разнообразить количество управляющих жестов и вложить в них больше информации, некоторые из них стали выполняться при помощи одновременного касания двух или трех пальцев.

Несколько примеров

Зачем нужно так много касаний

Очевидно, что для вышеописанных действий достаточно двух касаний. Когда-то так оно и было: в первых сенсорных дисплеях их было 2-3.

Отступая от вопроса, следует сказать, что число касаний – характеристика не программная, а аппаратная, и напрямую зависит от использованной технологии производства матрицы сенсорного дисплея.

Поэтому большое число касаний подразумевает еще и более точное управление в каждом конкретном случае.

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

В смартфонах нет компьютерной мыши, позволяющей в сочетании с клавиатурой осуществлять довольно сложные управляющие движения, поэтому интерфейс мобильных версий разрабатывается под управление именно с помощью мультитача.

И если вам кажется, что даже пять касаний в этом случае – запредельно много, поверьте: вы ошибаетесь. Самым заядлым геймерам порой не хватает и десяти.

Следует сказать, что некоторые разработчики декларируют до 20 касаний мультитача. И это вовсе не означает, что для этого пользователь должен задействовать еще и пальцы ног.

Просто такие устройства рассчитаны на использование несколькими людьми, и, как правило, не относятся к мобильным девайсам. Область их применения – сенсорные панели, используемые в магазинах, выставочных центрах и других общественных местах.

Как узнать, сколько касаний мультитача поддерживает дисплей

Что до неуважающих, иначе говоря, ноунеймов… скорее всего, там будет пять касаний. Экраны с меньшим числом сейчас просто не производят.

В заключение

Чем более совершенными становятся мобильные устройства с сенсорными дисплеями, тем более тонкое и быстрое управление для них требуется.

Мультитач позволяет решить часть проблем, связанных с малой диагональю и отсутствием физической клавиатуры.

И до тех пор, пока не придумали еще более прогрессивные способы ввода данных, будет оставаться важнейшим элементом интерфейса любой мобильной ОС.

Источник

Теория 7 касаний: где и как зацепить целевую аудиторию

Digital-день пользователя в цифрах и фактах

Мы составили примерную таблицу, где расписали, что делает пользователь в течение дня и какие каналы использует. Задумайся: не так ли проводит свой день потенциальный клиент твоего бизнеса? Равно как и каждый из нас.

Утро — это время новостей о погоде, мессенджеров и мобильного поиска за чашечкой кофе или по дороге на работу.

Днем в офисе люди в основном решают деловые вопросы, общаются по email и ищут информацию в Яндексе или Google.

18:00 — 19:00 — время, когда все возвращаются с работы, по дороге общаются с друзьями и родственниками в мессенджерах и соцсетях, заказывают с телефона пиццу или ищут развлечения на вечер.

Вечером человек отдыхает, проводя досуг в мессенджерах, просматривает личную почту, видео и соцсети.

Время после 21:00 — это период развлечений, хобби, тематических сайтов.

А теперь оставим лирику и обратимся к цифрам. Вот так в процентном соотношении выглядит обычный digital-день среднестатистического пользователя:

Как видно из пай-чарта, наименьшее количество времени пользователи про­водят в поиске Яндекса и Google — всего 5 % или 11,5 минут в день. В разре­зе рекламной кампании и закрытия бизнес-целей — это краткий миг, чтобы успеть заинтересовать целевую аудиторию. Уже на этом этапе стоит се­рьёзно задуматься о выборе каналов для эффективного продвижения.

Итак, контекстная реклама — это лишь 5 % времени потенциального клиен­та в сети. Да, можно добавить один из охватных каналов, например, рекламу на тематических сайтах и довести эту цифру до 35 %. Но если потенциаль­ный клиент ранее ничего не слышал про твоё предложение, скорее всего, ты не получишь заветной конверсии: по статистике, только порядка 2 % взаимо­действий с объявлением или сайтом приводят к целевому действию.

Таким образом, чтобы охватить максимум аудитории и постоянно находить новых потенциальных клиентов, необходимо взаимодействовать с пользова­телем в течение всего дня при помощи разных каналов на разных площадках. Причём желательно обеспечить не менее семи таких взаимодействий — «ка­саний», о которых поговорим далее.

Теория 7 касаний

Такое многоканальное продвижение отлично иллюстрирует теория 7 касаний. Идея в том, что клиенту нужно в среднем семь раз напомнить о себе, чтобы в конце концов он совершил целевое действие.

Наиболее красочно эту теорию иллю­стрирует фильм «Фокус» с Уиллом Сми­том в главной роли.

Кратко напомним сю­жет: задача героя Уилла — выиграть пари на колоссальную сумму у китайского мил­лионера, отгадав задуманное им число. Далее — тщательная подготовка и после­довательное использование различных ин­струментов. На пути бизнесмена расставлены подсказки-наводки: люстра в холле отеля с номером 55, реклама в лифте, номер 55 на футболках людей в вестибюле, на плакатах во время забастовки, на авто­бусе и т. д. Помимо визуального ряда, был задействован и формат аудио: миллионер слушал песню, в которой цифра 55 по­вторялась целых 144 раза. Каналов много, и эффект усиливается синергетически.

А в тот момент, когда нужно было загадать число, жертва смотрит на поле и видит игрока с номером 55. Где-то далеко в под­сознании всплыли моменты — как часто он видел именно это число! Бизнесмен решает, что это интуиция, и загадывает 55. Пари выиграно героем Уилла Смита — клиент совершил необходимое целевое действие.

Если перевести теорию 7 касаний на язык бизнеса, касание — это твое взаи­модействие с аудиторией. И применить такой подход, а самое главное — про­следить связь и преемственность этих касаний проще всего именно в онлай­не. Касания могут быть любыми: начиная от медийной рекламы и заканчивая email-рассылками. Аналогом в офлайне может быть разве что индивидуаль­ное ведение клиента — от первого (возможно, даже условно случайного) зна­комства до последующего обмена сувенирной продукцией и умения оказать­ся в нужное время в нужном месте.

Самое главное — чтобы в момент касания клиент вспомнил про твою компанию и выгоды твоего предложения.

Далее рассмотрим, как эта теория работает на реальных примерах.

Пример № 1

Клиенту нужно продать билеты на мюзикл, который будет проходить в Москве, с минимальной стоимостью заявки.

Тематика бизнеса: продажа билетов на концерты.

Цель: сформировать спрос у целевой аудитории.

Первое касание с аудиторией — запуск медийной рекламы по общим запросам («мюзиклы», «бродвейское шоу» и «куда пойти в Москве»). Параллельно с этим запускаем тематиче­скую рекламу по интересам «Культура и искусство», «Кино и театр».

Формируем спрос и информируем аудиторию. С частью по­тенциальных клиентов происходит первое касание, а с теми, кто увидел медийную рекламу, уже второе касание.

Далее тематическая реклама перестраивается с интере­сов пользователей на контент сайтов. В социальных сетях запускаем кампанию на кластер наиболее заинтересован­ной аудитории и подключаем технологию look-alike. Анало­гичным образом для кого-то это второе, а для кого-то уже третье касание.

Запускаем поисковую рекламу по околотематическим за­просам и по бренду, спрос на который уже начинает при­растать. Получаем третье и четвертое касание.

Таргетируемся на аудиторию групп конкурентов и нашей группы — четвёртое и пятое касание.

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

Шестое и седьмое касания обеспечиваем за счёт ремарке­тинга в Яндексе, Google и социальных сетях. Увеличиваем бюджет на бренд-запросы.

В итоге наблюдаем рост числа заявок и снижение стоимо­сти лида практически в 4 раза.

Каждый из каналов внёс свой вклад в итоговую конверсию.

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

Пример № 2

Тематика бизнеса: программы сбережения для жителей Москвы и области.

Цель: увеличение количества вкладов.

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

Запускаем рекламную кампанию с проверкой гипотезы: «Что будет, если вывести в топ контекстной рекламы все за­просы, по которым идут показы медийно-контекстного бан­нера?»

Результат: снижение стоимости лида до 3500 рублей как эф­фект синергии каналов.

Каждое касание — важный кирпичик в фундаменте успешной рекламной кам­пании, часть единой стратегии, где отсутствие одного из элементов может от­вернуть клиента от совершения целевого действия.

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

О том, как происходит процесс принятия решения о покупке и какие каналы будут эффективны на каждом из этапов, читай в нашей книге «Комплекс платных каналов: начни тотальную охоту на клиентов».

Источник

Mobcompany.info

Сайт о смартфонах и их производителях

Что даёт количество касаний в сенсоре экрана смартфона

Первые сенсорные смартфоны имели пластиковые тачскрины, работающие по резистивному принципу. В 2007 году увидел свет первый iPhone, фирменной фишкой которого стала поддержка мультитач (нескольких одновременных касаний). С ее помощью осуществлялось масштабирование интерфейса, переключение элементов, зум в камере и другие действия. После этого поддержку нескольких одновременных касаний стали внедрять и другие производители. Изначально их было всего два, но дальше намечалась тенденция к увеличению.

На данный момент производители смартфонов ограничились десятью касаниями (по количеству пальцев). Однако в бюджетных смартфонах все еще встречаются и более простые экраны, с сенсорами, поддерживающими только 2, 3 или 5 прикосновений одновременно. Что дает количество касаний в тачскрине экрана смартфона – по порядку ниже.

Масштабирование и зум. Самая первая функция, которая появилась у емкостных экранов с поддержкой мультитач. Для масштабирования достаточно всего двух касаний. Чтобы уменьшить или увеличить картинку, документ, страницу – нужно коснуться двумя пальцами к экрану и развести их в стороны или сблизить. Также можно использовать эти движения для зума в камере.

Жестовое управление. Большое количество воспринимаемых касаний позволяет организовать поддержку специальных жестов управления смартфоном. К примеру, с помощью движения нескольких пальцев вдоль экрана можно заблокировать экран, сделать скриншот, переключить программу, запустить приложение или функцию. Подобная функциональность является аналогом комбинаций горячих клавиш на устройствах с физической клавиатурой.

Управление в играх. Без мультитач играть на смартфоне с сенсорным экраном практически невозможно. Если игра требует нажатия нескольких кнопок сразу – на экране без мультитач сделать это не получится. Поддержка большого количества касаний сенсором дает возможность разработчикам игр внедрять различные элементы экранного управления, повторяющие функциональность геймпада.

Нужна ли смартфону поддержка большого количества одновременных касаний?

Казалось бы, задействовать весь потенциал десятипальцевого мультитача можно только если смартфон лежит на столе. Кроме того, это неудобно (пальцы закрывают обзор) и вроде как не нужно в реальной жизни, поэтому целых 10 касаний – ненужное излишество. Однако в реальности все немного сложнее.

Сколько касаний одновременно может воспринимать экран смартфона – определяется конструкцией сенсора. Для добавления большего их числа требуется усложнять тачскрин, добавлять новые линии, позволяющие параллельно получать данные об месте утечки энергии (а именно ее регистрирует емкостный экран при касании) с нескольких каналов (в нескольких точках). Если этих линий мало (необходимый минимум – две: для осей X и Y) – то и много одновременных касаний экран не поймет.

Поддержка всего двух касаний экраном смартфона позволяет использовать его для скроллинга, масштабирования, поворота объектов на экране. Однако идеальная работа такого тачскрина достигается, только если два пальца не оказываются на одной линии по оси X или Y. В этом случае могут происходить сбои определения точек касания, экран смартфона определяет ее неверно, или вообще не определяет.

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

Таким образом, поддержка сенсорным экраном большого количества касаний нужна не всегда. Для чтения и интернета двух вполне достаточно. А вот в играх – пяти- или десятипальцевый мультитач на смартфоне часто является необходимостью.

Количество воспринимаемых сенсором касаний можно проверить в приложении AnTuTu.

Источник

Заставьте сайт работать на сенсорных устройствах

Сенсорные экраны на мобильных телефонах, планшетах, ноутбуках и настольных компьютерах открыли веб-разработчикам целый ряд новых взаимодействий. В переведенном руководстве Патрик Локи рассматривает основы работы с сенсорными событиями в JavaScript. Все рассматриваемые далее примеры есть в архиве.

Нужно ли нам беспокоиться о касаниях?

С появлением сенсорных устройств основной вопрос от разработчиков: «Что мне нужно сделать, чтобы убедиться, что сайт или приложение на них работает?» Удивительно, но ответ — ничего. Мобильные браузеры по умолчанию справляются с большинством сайтов, которые не разрабатывались для сенсорных устройств. Приложения не только нормально работают со статичными страницами, но еще и обрабатывают интерактивные сайты с JavaScript, где сценарии связаны с событиями вроде наведения курсора.

Для этого браузеры симулируют или моделируют события мыши на сенсорном экране устройства. Простой тест страницы (example1.html в приложенных файлах) показывает, что даже на сенсорном устройстве нажатие кнопки запускает следующую последовательность событий: mouseover > mousemove > mousedown > mouseup > click.

Эти события вызываются в быстрой последовательности практически без задержки между ними. Обратите внимание на событие mousemove, обеспечивающее хотя бы единоразовое выполнение всех сценариев, запускаемых поведением мыши.

Если ваш сайт реагирует на действия мыши, его функции в большинстве случае будут по-прежнему работать на сенсорных устройствах, не требуя дополнительной модификации.

Проблемы симуляции событий мыши

Задержка кликов

При использовании сенсорных экранов браузеры умышленно задействуют искусственную задержку длительностью около 300 мс между действием касания (например, нажатием на кнопку или ссылку) и фактической активацией клика. Эта задержка позволяет пользователям совершать даблтапы (например, для увеличения и уменьшения изображения) без случайной активации других элементов страницы.

Если вы хотите создать сайт, который реагирует на действия пользователя как нативное приложение, тут могут быть проблемы. Это не то, чего ждут обычные пользователи от большинства интернет-ресурсов.

Отслеживание движения пальцев

Как мы уже заметили, синтетические события, отправляемые браузером, содержат событие mousemove — всегда только одно. Если пользователи слишком много водят пальцем по экрану, синтетические события не будут формироваться вообще — браузер интерпретирует такое движение как жест вроде прокрутки.

Это становится проблемой, если ваш сайт управляется путем движений мыши — например, приложение для рисования.

Давайте создадим простое canvas-приложение (example3.html). Вместо конкретной реализации посмотрим, как сценарий реагирует на движение мыши.

Если тестировать пример с помощью мыши, видно, что позиция указателя непрерывно отслеживается по мере перемещения курсора. На сенсорном устройстве приложение не реагирует на перемещение пальцев, а откликается только на нажатие, которое запускает синтетическое событие движения.

«Смотрите глубже»

Чтобы решить перечисленные проблемы, придется уйти в абстракцию. Сенсорные события появились в Safari для iOS 2.0, и после внедрения почти во всех браузерах были стандартизированы в спецификации W3C Touch Events. Новые события, зафиксированные в стандарте — touchstart, touchmove, touchend и touchcancel. Первые три спецификации эквивалентны стандартным mousedown, mousemove и mouseup.

Touchcancel вызывается, когда сенсорное взаимодействие прерывается — например, если пользователь выводит палец за предел текущего документа. Наблюдая за порядком, в котором вызываются сенсорные и синтетические события для нажатия, получаем (example4.html):

touchstart > [ touchmove ]+ > touchend > mouseover > (a single) mousemove > mousedown > mouseup > click.

Задействуются все сенсорные события: touchstart, одно или больше touchmove (в зависимости от того, как аккуратно пользователь нажимает на кнопку, не перемещая палец по экрану), и touchend. После этого запускаются синтетические события и происходит финальный клик.

Обнаружение сенсорных событий

Чтобы определить, поддерживает ли браузер сенсорные события, используется простой скрипт.

Этот фрагмент отлично работает в современных браузерах. У старых есть причуды и несоответствия, которые можно обнаружить, только если лезть из кожи вон. Если ваше приложение ориентировано на старые браузеры, попробуйте плагин Modernizr и его механизмы тестирования. Они помогут выявить большинство несоответствий.

При определении поддержки сенсорных событий мы должны четко понимать, что тестируем.

Выделенный фрагмент проверяет только способность браузера распознавать касание, но не говорит, что приложение открыто именно на сенсорном экране.

Работа над задержкой клика

Если мы протестируем последовательность событий, передаваемых в браузер на сенсорных устройствах и включающих информацию о синхронизации (example5.html), мы увидим, что задержка в 300 мс появляется после события touchend:

touchstart > [ touchmove ]+ > touchend > [300ms delay] > mouseover > (a single) mousemove > mousedown > mouseup > click.

Итак, если наши скрипты реагируют на клик, от задержки браузера по умолчанию можно избавиться, прописав реакции на touchend или touchstart. Мы делаем это, отвечая на любое из этих событий. Touchstart используется для элементов интерфейса, которые должны запускаться сразу при касании экрана — например, кнопок управления в html-играх.

Опять же, мы не должны делать ложных предположений о поддержке сенсорных событий и том, что приложение открыто именно на сенсорном устройстве. Вот один из распространенных приемов, который часто упоминается в статьях о мобильной оптимизации.

Хотя этот сценарий несет благие намерения, он основан на взаимоисключающем принципе. Реакция либо на клик, либо на касание в зависимости от поддержки браузера вызывает проблемы на гибридных устройствах — они немедленно прервут любое взаимодействие при помощи мыши, трекпада или касания.

Более надежный подход учитывает оба типа событий:

Проблема в том, что функция выполняется дважды: один раз при touchend, второй раз — когда запускаются синтетические события и клик. Обойти это можно, если подавлять стандартную реакцию на события мыши, используя preventDefault(). Мы также можем предотвратить повторение кода, просто заставляя обработчик touchend вызывать нужное click-событие.

С preventDefault() есть проблема — при его использовании в браузере подавляется любое другое поведение по умолчанию. Если мы применим его непосредственно к начальным событиям касания, будет блокирована любая другая активность — прокрутка, долгое движение мыши или масштабирование. Иногда это приходится к месту, но метод стоит использовать с осторожностью.

Приведенный пример кода не оптимизирован. Для надежной реализации проверьте его в FTLabs’s FastClick.

Отслеживание движения с touchmove

Вооружившись знаниями о сенсорных событиях, вернемся к трекинг-примеру (example3.html) и посмотрим, как его можно изменить, чтобы отслеживать движения пальцев на сенсорном экране.

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

Анатомия сенсорных событий

В соответствии с Document Object Model (DOM) Level 2, функции, которые реагируют на события мыши, получают объект mouseevent в качестве параметра. Этот объект включает свойства — координаты clientX и clientY, которые приведенный скрипт использует для определения текущей позиции мыши.

Например:

Как видим, touchevent содержит три различных тач-листа.

Каждый из этих листов представляет собой матрицу отдельных сенсорных объектов. Здесь мы найдем пары координат по подобию clientX и clientY.

Использование событий касания для отслеживания пальцев

Вернемся к примеру, основанному на canvas. Мы должны изменить функцию так, чтобы она реагировала и на сенсорные события, и на действия мыши. Нужно отследить перемещение единственной точки касания. Просто захватываем координаты clientX и clientY у первого элемента в массиве targetTouches.

При тестировании измененного сценария на сенсорном устройстве (example6.html) вы увидите, что отслеживание одиночного движения пальцем теперь надежно работает.

Если мы хотим расширить пример так, чтобы работал мультитач, придется немного изменить первоначальный подход. Вместо одной пары координат мы будем учитывать целый их ряд, который циклически обрабатывается. Это позволит отслеживать и одиночные клики мыши, и мультитач (example7.html).

Вопросы производительности

Как и события mousemove, во время движения пальцев touchmove может работать с высокой скоростью. Желательно избегать сложного кода — комплексных вычислений или целых событий рисования для каждого перемещения. Это важно для старых и менее производительных сенсорных устройств, чем современные.

В нашем примере мы выполняем абсолютный минимум — хранение последних массивов мыши или координат точек касания. Код приложения независимо выполняется в отдельном цикле с помощью setInterval.

Если количество событий, которое обрабатывается скриптом, слишком высоко, это заслуживает работы специальных решений — например, limit.js.

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

Источник