Touch события на javascript, мультитач - реализация. Как использовать жесты TalkBack Как называется жест пальцем по экрану смпр

С помощью жестов TalkBack вы можете легко управлять устройством Android.

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

Основные жесты

Жесты перехода

Угловые жесты

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

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

Жесты двумя пальцами

Все жесты TalkBack выполняются одним пальцем. Пока вы касаетесь экрана одним пальцем, ваши жесты отправляются только в TalkBack.

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

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

Настройка жестов TalkBack

Все вышеперечисленные жесты установлены по умолчанию. При желании вы можете изменить их назначение.

Узнайте значения новых терминов! Ознакомьтесь с кратким словариком для владельцев айфонов, смартфонов и планшетов.

Известно всем:

Клик (click) - щелчок по кнопке мыши, короткое нажатие.

Дабл-клик, двойной клик (double click) - два быстрых щелчка по кнопке мыши.

Интерфейс (interface) - то, как устройство или приложение «общается» с вами.

Скроллинг (scrolling) – прокрутка экрана.

Скриншот (screenshot) - снимок («фотография») экрана.

Известно многим:

Драг-энд-дроп, дрэг-энд-дроп (drag-and-drop) - «тащить и бросить» - нажать в одном месте, затем двигать и отпустить в другом месте.

Гестуры, жесты (gestures) - разные формы движения мыши, пальца или другого указующего устройства. Могут быть запрограммированы для выполнения определённых действий. Например, движение пальца сверху вниз по экрану мобильного устройства перезагружает страницу.

Тачпад, тачпэд (touch pad) - поле на клавиатуре ноутбука для нажатий и жестов пальцами.

Тачскрин (touch screen) - сенсорный экран: воспринимает нажатия пальцами. Например, экран планшета или банкомата.

Простые движения для сенсорных устройств:

Тап, тэп (tap) - короткое нажатие пальцем, сродни клику.

Двойной тап, Дабл-тап, дабл-тэп (double tap) - два коротких нажатия пальцем, сродни дабл-клику.

Длинный тап, Тач (touch) - нажатие дольше, чем Тап.

Тач-энд-холд (touch and hold) - нажать и держать.

Новые движения для сенсорных устройств:

Флик (flick) - щелчок наискось по экрану в сторону будущего движения изображения экрана, после флика изображение продолжает двигаться по инерции.

Свайп (swipe), Слайд (slide) - продолжительное скольжение пальцем по экрану.

Пинч (pinch) - щипок, сжимающее движение одновременно двумя пальцами по экрану для уменьшения изображения.

Спред / Спрэд (spread), Стретч (stretch: для Microsoft), Пинч-ит-опен (pinch it open: для Apple) - растягивающее движение одновременно двумя пальцами по экрану для увеличения изображения.

Пан, пэн (pan) - медленное движение пальца по экрану для перемещения и разглядывания увеличенной картинки.

Если пропущено что-то важное или вы не согласны с формулировкой, напишите нам: Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.

Разрабатывая приложения для Android и iPhone с iPad (IOS) используя лишь веб-технологии, перед каждым девелопером встаёт рано или поздно вопрос реализации и использования в своей игре или приложении сложными мультитач действиями, такими как свайп, щепотка, а также обработки длительного тапа (длительное касание одним пальцем без движения) и drag"n"drop.

В этом материале мы рассмотрим способы осуществления обработки тач-событий разной сложности на Javascript Event"ах, без сторонних библиотек (jQuery min только прихватим).

Сразу оговорюсь, что использовать jQuery я буду только для того чтобы отключить дефолтное поведение браузера на событие. Мне не нравится эта библиотека, поэтому всё будет написано на Vanilla JS.

Итак, начнём мы с теории и собственно коснёмся того какие события стоит использовать при создании приложения или игры.

Всего используются 3 ключевых события:

touchstart - Коснулись экрана

touchend - Палец убрали

touchmove - Двигаем пальцем

Если чтобы получить элемент на который заехала мышь или съехала, было достаточно вызвать event.target, то с touch-событиями не так всё просто.

Каждое касание должно идентифицироваться. И для этого используются списки:

touches - Все пальцы которые сейчас взаимодействуют с экраном ("Коснуты" экрана)

targetTouches - Список пальцев которые взаиможействуют с элементом

changedTouches - Список пальцев, которые учавствуют в текущем событии. Если например это событие touchend, то список будет содержать палец который был убран (Даже если остальные 4 пальца до сих пор на экране).

Чтобы было проще понять вот ситуация:

Я ставлю один палец на экран и все 3 списка имеют один элемент.

Я ставлю второй палец и теперь touches имеет 2 элемента, targetTouches будет иметь 2 элемента если второй палец я поставлю на тот же HTML элемент что и первый, а changedTouches в свою очередь будет иметь только второй палец, так как именно он вызвал событие.

Если я поставлю на экран сразу 2 пальца одновременно, тогда changedTouches будет иметь 2 элемента (по каждому на палец).

Если я начну двигать своими пальцами по экрану, то будет меньться только список changedTouches. Количество элементов которое он будет содержать будет равняться количеству пальцев задействованных в движение (как минимум 1).

Если я уберу палец, то списки touches, targetTouches опустеют на один элемент, а changedTouches будет содердать палец, так как он вызвал событие (touchend)

Когда я уберу последний палец, списки touches, targetTouches не будут содержать ничего, а changedTouches будет иметь информацию о этом самом пальце.

Теперь самое время узнать какую именно информацию мы можем получить о пальце:

identifier - Уникальный ID касания

target - Сам объект к которому мы коснулись

PageX,PageY - Координаты касания на странице

Посмотреть уникальный ID единственного касания можно вызвав event.touches.identifier , а на IOS, если я не ошибаюсь надо делать так event.originalEvent.touches.identifier .

Что ж, кой чему я вас уже научил, а теперь самое время перейти к практике.

Перед тем как мы приступим вам следует усвоить кое-что. В каждой игре, приложении которое вы будете делать на Android и IOS вы должны отключить стандартную реакцию компонента WebView на события. Для этого мы и подключали jQuery (Я не смог сделать на Pure JS то что делают функции event.preventDefault() и event.stopPropagation() ).

Итак вам нужно поместить в ваш JS код следующее:

event.preventDefault();
event.stopPropagation();

}, false);

event.preventDefault();
event.stopPropagation();
/* Здесь ваш код обработки события*/
}, false);

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

Отвелеклись. Продолжаем.

Давайте имея полученные знания опишем все основные touch взаимодействия с экраном и элементами.

Tap (Косание)

Это событие выполняется просто когда мы косаемся пальцем экрана и убираем его.

var myclick=event.targetTouches; /*Ваш код*/
}
}, false);

На примере в переменной myclick будет содержаться ваше касание.

Long tap (Длительное косание)

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

Реализация 1:

var ldelay;
var betw={};
document.addEventListener("touchstart", function(event) {
event.preventDefault();
event.stopPropagation();
ldelay=new Date();
betw.x=event.changedTouches.pageX;
betw.y=event.changedTouches.pageY;
}, false);
/*Ловим отпускание пальца*/
document.addEventListener("touchend", function(event) {
var pdelay=new Date();
if(event.changedTouches.pageX==betw.x &&
event.changedTouches.pageY==betw.y &&
(pdelay.getTime()-ldelay.getTime())>800){
/*Здесь ваш код*/
}
}, false);

Это первая реализация Long Tap на яваскрипте. Логика такая: ловим касание, замеряем время этого события, ловим отпускание, замеряем время отпускания, вычитаем первое время из второго и проверяем не изменилось ли положения пальца на экране. Если палец на том же месте и времени прошло более 800 миллисекунд, мы выполняем действия Long Tap.

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

Реализация 2:

var lttimer;
document.addEventListener("touchstart", function(event) {
event.preventDefault();
event.stopPropagation();
lttimer=setTimeout(longTouch,800);
}, false);
document.addEventListener("touchmove", function(event) {
event.preventDefault();
event.stopPropagation();
clearTimeout(lttimer);
}, false);
document.addEventListener("touchend", function(event) {
clearTimeout(lttimer);
}, false);
function longTouch(){/*Ваш код*/}

Выше приведённая реализация события Long Tap на Javascript является более правильной и наиболее часто применяется в мобильных приложениях. Её главное отличие от предыдущей реализации в том что она не дожидается когда будет отпущен палец и сама в том случае если палец не двигался запускает событие Long Tap, которое вы должны поместить в функцию longTouch.longTouch .

Swipe (Листание)

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

Если вы не хотите заморачиваться и вам нужен только функционал Swipe в мобильном приложении, вы можете почитать в самом низу страницы об этом.

Если же вы зардкорный девелопер - поехали!

Реализация 1:

var initialPoint;
var finalPoint;
document.addEventListener("touchstart", function(event) {
event.preventDefault();
event.stopPropagation();
initialPoint=event.changedTouches;
}, false);
document.addEventListener("touchend", function(event) {
event.preventDefault();
event.stopPropagation();
finalPoint=event.changedTouches;
var xAbs = Math.abs(initialPoint.pageX - finalPoint.pageX);
var yAbs = Math.abs(initialPoint.pageY - finalPoint.pageY);
if (xAbs > 20 || yAbs > 20) {
if (xAbs > yAbs) {
if (finalPoint.pageX < initialPoint.pageX){
/*СВАЙП ВЛЕВО*/}
else{
/*СВАЙП ВПРАВО*/}
}
else {
if (finalPoint.pageY < initialPoint.pageY){
/*СВАЙП ВВЕРХ*/}
else{
/*СВАЙП ВНИЗ*/}
}
}
}, false);

Это у нас первая реализация свайпа на Javascript. Особенность этой реализации в том что событие засчитывается как свайп, когда вы отпускаете палец участвующий в событии. Данный свайп может быть применён в некоторых задачах. Не забывайте в этом и многих других премерах выключать стандартное поведение браузера на тач события (Об этом я писал выше), я не пишу обычно их в приведённых примерах, но вы не забывайте.

А теперь рассмотрим другую - классическую реализацию, когда swipe нужно считать в реальном времени, например при перелистывании страницы:

В этом способе мы пошли немного другим путём и чстично использовали принцип первой реализации. По своей логике это немного более сложный свайп. В том месте где откомментировано /*Обработайте данные*/, вы должны использовать координаты свайпающего пальца. Например, это может быть анимация перелистывания страницы и чем левее палец тем больше отлистывается страница. Для примера мы в той части слушателя события touchmove отслеживали только x-координату, y - прикручивается подобным образом. В переменной otk.x храниться текущее положение пальца относительно точки где он впервые коснулся эрана. Если палец левее этой точки то переменная имеет отрицательное значение, если правее - положительное.

Для примера мы там поставили условие когда палец перемещается на расстояние более 200 пикселей в лево или право от точки касания - мы засчитываем свайп. Для чего это нужно? Например вы можете как только пользователь коснулся и начал двигать палец показывать ему плавное перелистывание страницы, которая идёт за его пальцем, а как только палец уходит за 200 пикселей, совершает окончательная анимация и страница перелистывается. Это как одна из возможных способом применения такого свайпа.

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

Drag"n"Drop (Перетаскивание элемента)

Нередко в интерфейсах приложений и в играх приходится перетаскивать пальцем один из элементов в определённое место. Давайте сделаем это на javascript заточенным под сенсорные экраны. Начнём:

Как видно это не весь код, у нас пока получился drag без drop"а. Вы уже наверняка обратили внимание что передвижение элемента в конечном счёте производится css параметрами left и top . Можно вместо этих двух строчек, отвечающих за передвижение объкта по экрану поставить:

obj.style.WebkitTransform="translate("+(touch.pageX-touchOffsetX)+"px,"+(touch.pageY-touchOffsetY)+"px)";

Т.е. использовать CSS3, однако в своём случае я не заметил прироста производительности, пожтому лувше top и left . Этим кодом вы можете передвигать предмет по полю, но его отпускание на каком-то определённом месте засчитано не будет. Чтобы это реализовать добавим на объект обработчик touchend с соответствующим кодом внутри:

Для того чтобы всё работало, укажите ваш объект в переменную tarobj и будет вам счастье.

Pitch (Щепотка)

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

В примере ниже отмечены комментариями ключевые моменты (чтобы код не сливался в полнейшую пшеничную кашу):

/*Определяем некоторые переменные*/
var objzoom = document.getElementById("dro");
var scaling = false;
var dist = 0;
var scale_factor = 1.0;
var curr_scale = 1.0;
var max_zoom = 8.0;
var min_zoom = 0.5
/*Пишем функцию, которая определяет расстояние меж пальцами*/
function distance (p1, p2) {
return (Math.sqrt(Math.pow((p1.clientX - p2.clientX), 2) + Math.pow((p1.clientY - p2.clientY), 2)));
}
/*Ловим начало косания*/
objzoom.addEventListener("touchstart", function(evt) {
evt.preventDefault();
var tt = evt.targetTouches;
if (tt.length >= 2) {
dist = distance(tt, tt);
scaling = true;
} else {
scaling = false;
}
}, false);
/*Ловим зумирование*/
objzoom.addEventListener("touchmove", function(evt) {
evt.preventDefault();
var tt = evt.targetTouches;
if (scaling) {
curr_scale = distance(tt, tt) / dist * scale_factor;
objzoom.style.WebkitTransform = "scale(" + curr_scale + ", " + curr_scale + ")";
}
}, false);
/*Ловим конец косания*/
objzoom.addEventListener("touchend", function(evt) {
var tt = evt.targetTouches;
if (tt.length < 2) {
scaling = false;
if (curr_scale < min_zoom) {
scale_factor = min_zoom;
} else {
if (curr_scale > max_zoom) {
scale_factor = max_zoom;
} else {
scale_factor = curr_scale;
}
}
objzoom.style.WebkitTransform = "scale(" + scale_factor + ", " + scale_factor + ")";
} else {
scaling = true;
}
}, false);

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

Слайдинг изображений и HTML

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

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

Есть также красивый слайдинг изображений .

Помимо такого мануального создания тач-оболочки приложения или игры, вы можете использовать фреймворк. Вот список популярных в этой теме фреймворков Sencha Touch , jQ Touch , JQuery Mobile .

Последний вопрос - вопрос совместимости этого всего с мобильными платформами. Что ж, touch поддерживают Android 2.3-4.X и IOS. А вот мультитач поддерживают все кроме Android 2.3.

Не забывайте что вешать обработчики на HTML-объекты стоит тогда когда они уже известны, т.е. в событии window.onload или DOMContentLoaded .

Если есть чем дополнить статью - пишите в комментариях.

Статьи и Лайфхаки

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

Что же такое все эти «флик », «стретч », «пэн », «тап », «свайп », «тач », и чем они отличаются друг от друга?

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

Скроллинг (scrolling , от scroll – свиток) – прокрутка тем или иным способом экрана. Термин появился еще на десктопах, где для скроллинга использовалось колесико мыши. В гаджетах осуществляется вертикальным движением пальца по дисплею.

Скриншот (screenshot , screen – экран, shot – выстрел) – т.н. снимок экрана, при котором текущая картинка сохраняется в графический файл. Для создания скриншотов используются соответствующие приложения, а также «облачные» сервисы.

Гестуры , жесты (gestures ) – определенные движения по экрану указателя, в данном случае – пальца или , позволяющие заменить те или иные команды или их последовательности. Существенно ускоряют и упрощают работу с мобильными устройствами.

Тачскрин (touch screen , touch – касаться) – сенсорный дисплей, реагирующий на касания. Кроме мобильных устройств, используется в терминалах и банкоматах.

Тап и даблтап – (tap – нажатие) – короткое нажатие на элемент интерфейса сенсорного дисплея, сродни щелчку мышью. Соответственно, даблтап – двойной щелчок.

Тач – более продолжительное, чем тап, нажатие, в десктопах аналога не имеет.

Тач-н-холд (touch and hold – коснуться и удерживать) – явствует из перевода: нажатие и продолжительное удержание пальца или стилуса.

Свайп , слайд (swype , slide – скользить) – продолжительное скользящее движение пальца по дисплею, например, при открытии шторки камеры.

«Свайп» еще имеет другое значение – особый способ набора текста, не отрывая палец от виртуальной клавиатуры, используемый в популярном приложении Swype Keyboard.

Флик (flick - легкий удар, щелчок) – щелчок по дисплею смартфона или планшета наискось, после чего экран начинает двигаться в указанном направлении.

Пэн (pan – панорамирование, а вовсе не «сковорода» или «унитаз», как некоторые могли подумать) – движение по экрану увеличенного изображения, позволяющее увидеть скрытые за краем экрана части.

Пинч (pinch – щипок) и стретч (stretch – растяжение) – «сжимающие» и «растягивающие» движение пальцами, позволяющие, соответственно, уменьшить или увеличить масштаб картинки.

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

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

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

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

Но для использования iPad требуется больше, чем просто прикосновение. Вы нажимаете, дважды нажимаете, нажимаете и удерживаете кнопки, пролистываете и перетаскиваете значки, проводите пальцами по экрану. Какие движения вы будете дела и когда — зависит от того, что вы захотите сделать. Мы уже описывали основные данная статья поможет вам разобраться с этим на iPad.

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

Вы узнаете, как исполнять «танец пальцев», чтобы iPad отвечал на все ваши команды. Вы также освоите несколько сочетаний клавиш и узнаете, как использовать свои пальцы, чтобы найти нужные вещи на iPad. Так что разомните руки и приступайте.

«Мозг» iPad — его операционная система — достаточно умен, чтобы ответить на серию самых разных прикосновений.

Движения пальцев зависят от того, что вы хотите сделать. Возможны следующие действия.

Нажатие. Слегка нажмите кончиком пальца на значок, ярлык, название песни или элемент управления, которые вы видите на экране. iPad — это не старый грубый калькулятор, так что вам не нужно сильно надавливать, достаточно легкого прикосновения.
Перетаскивание. Прижмите палец к стеклу и сдвиньте его в сторону, чтобы перейти к различным частям экрана. Так вы можете управлять регуляторами громкости и перемещаться по фотографиям. Перетаскивание двумя пальцами перемещает окно в окне (например, плавающее окно, которое появляется в окне Facebook, когда вы вызываете список друзей).
Перемещение. Перемещение похоже на перетаскивание, за исключением того, что используется оно только для одного элемента управления — кнопки Unlock/Confirm (Разблокировать/Подтвердить). Она находится на «дорожке», по которой вы перемещаете ползунок, выводя iPad из Режима сна или подтверждая полное выключение.
Пролистывание. Легко и быстро проведите пальцем вверх или вниз по экрану и просматривайте веб-страницу или список песен в направлении пролистывания. Чем быстрее вы пролистываете, тем быстрее прокручивается экран. В фотоальбоме пролистывайте из стороны в сторону, чтобы изображения сменяли друг друга на экране.
Сведение и разведение пальцев. Для увеличения части изображения, документа или веб-страницы сложите большой и указательный пальцы вместе, поместите их на экран, а затем разведите в стороны. Чтобы уменьшить масштаб, поместите разведенные пальцы на экран и сведите их вместе.
Двойное нажатие. Два поочередных нажатия нужны в нескольких ситуациях. Во-первых, это быстрый способ увеличить фотографию или веб-страницу. Во-вторых, если вы смотрите видео, то это позволяет вам переключать соотношение ширины и высоты. В полноэкранном режиме (на рисунке слева) края кадра обрезаются. Широкоэкранный вид (на рисунке справа) предпочитают любители кино, потому что в таком режиме фильм выглядит так, как задумал режиссер.