English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
В мобильной разработке одним из простых методов является сначала создание прототипа на рабочем столе, а затем обработка специфических для мобильных устройств частей на устройствах, которые вы планируете поддерживать. Многоточечное сенсорное взаимодействие - это одна из функций, которые трудно тестировать на ПК, так как большинство ПК не имеют сенсорного ввода.
Тестирование на мобильных устройствах может значительно延长 ваш цикл разработки, так как каждое изменение, которое вы вносите, требует внесения изменений в код на сервере, а затем загрузки на устройство. После этого, как только приложение запустится, оно уже трудно отладить, так как планшеты и смартфоны сильно уступают инструментам, которые используют веб-разработчики.
Одним из решений этой проблемы может быть имитация сенсорных событий на компьютерах для разработчиков. Для сенсорных событий одного касания можно имитировать события мыши. Если у вас есть сенсорное устройство ввода, например современный Apple MacBook, то многоточечные сенсорные события также можно имитировать.
Сенсорные события одного касания
Если вы хотите имитировать сенсорные события в виде одного касания на рабочем столе, попробуйте Phantom Limb, эта программа имитирует сенсорные события на веб-странице и предоставляет руку для навигации.
Кроме того, есть плагин Touchable для jQuery, который обеспечивает единство сенсорных и мышиных событий на всех платформах
Многоточечные сенсорные события
Чтобы обеспечить работу многоточечного веб-приложения в вашем браузере или на многоточечном сенсорном панеле (например, Apple MacBook или MagicPad), я создал этот инструмент для заполнения MagicTouch.js, который улавливает сенсорные события с панели и преобразует их в стандартные совместимые сенсорные события.
1. Загрузите плагин NPAPI npTuioClient и установите его в папку ~/Library/Internet Plug-Ins.
2. Загрузите приложение TongSeng TUIO для Mac MagicPad и запустите этот сервер.
3. Загрузите библиотеку JavaScript MagicTouch.js, чтобы на основе callback npTuioClient имитировать совместимые с规范ом события касания.
4. Включите скрипт magictouch.js и плагин npTuioClient в ваше приложение следующим образом:
< head> ... < script src="/path/to/magictouch.js" kesrc="/path/to/magictouch.js">< /script> < /head> < body> ... < object id="tuio" type="application/x-tuio" style="width: 0px; height: 0px;"> Touch input plugin failed to load! < /object> < /body>
Я тестировал этот метод только на Chrome 10, но с небольшими изменениями он должен работать и на других современных браузерах.
Если у вашего компьютера нет多点 касания, вы можете использовать другие TUIO трекеры, такие как reacTIVision, чтобы имитировать события касания. Для получения дополнительной информации обратитесь на страницу проекта TUIO.
Одним из моментов, на который стоит обратить внимание, является то, что ваши жесты могут быть такими же, как и многоточечные жесты на уровне ОС. На OS X вы можете настроить системные события, перейдя в раздел настроек Trackpad в System Preferences.
С тех пор как функция多点 касания постепенно получает широкую поддержку в кроссплатформенных мобильных браузерах, я с удовлетворением вижу, что новые веб-приложения充分利用了这个丰富的API.
Источник оригинала: html5rocks.com
Заголовок оригинала: Developing for Multi-Touch Web Browsers
1. События касания на телефонах
Основные события:
touchstart // срабатывает, когда палец только что коснулся экрана
touchmove // срабатывает, когда палец движется по экрану
touchend // срабатывает, когда палец удаляется с экрана
Следующий список используется реже: touchcancel // срабатывает, когда процесс касания отменяется системой
Каждое событие имеет следующие списки, например, для touchend targetTouches конечно же 0:
touches // список всех пальцев, находящихся на экране
targetTouches // список всех пальцев, находящихся на данном элементе
changedTouches // список всех пальцев, участвующих в текущем событии
Каждое событие имеет список, каждый список также имеет следующие атрибуты:
Часто используются координаты pageX, pageY:
pageX // координата X по отношению к странице
pageY // координата Y по отношению к странице
clientX // координата X по отношению к области просмотра
clientY // координата Y по отношению к области просмотра
screenX // координата X по отношению к экрану
screenY // координата Y по отношению к экрану
identifier // уникальный идентификатор текущей точки касания
target // элемент DOM, на который было наложено касание
Другие связанные события:
event.preventDefault(); // предотвращение масштабирования и скроллинга браузера при касании
var supportTouch = "createTouch" in document // определение поддержки событий касания
2. Пример
Вот пример кода для получения различных типов скольжения, объединив идеи предшественников, мы создали это, что можно использовать и изучать:
var touchFunc = function(obj,type,func) {
// если диапазон скольжения составляет 5x5, то выполняется обработка клика, s - начало, e - конец
var init = {x:5,y:5,sx:0,sy:0,ex:0,ey:0};
var sTime = 0, eTime = 0;
type = type.toLowerCase();
obj.addEventListener("touchstart",function(){
sTime = new Date().getTime();
init.sx = event.targetTouches[0].pageX;
init.sy = event.targetTouches[0].pageY;
init.ex = init.sx;
init.ey = init.sy;
if(type.indexOf("start") != -1) func();
}, false);
obj.addEventListener("touchmove",function() {
event.preventDefault(); // предотвращение масштабирования и скроллинга браузера при касании
init.ex = event.targetTouches[0].pageX;
init.ey = event.targetTouches[0].pageY;
if(type.indexOf("move")!=-1) func();
}, false);
obj.addEventListener("touchend",function() {}})
var changeX = init.sx - init.ex;
var changeY = init.sy - init.ey;
if(Math.abs(changeX)>Math.abs(changeY)&&Math.abs(changeY)>init.y) {
// События влево-вправо
if(changeX > 0) {
if(type.indexOf("left")!=-1) func();
}
if(type.indexOf("right")!=-1) func();
}
}
else if(Math.abs(changeY)>Math.abs(changeX)&&Math.abs(changeX)>init.x){
// События вверх-вниз
if(changeY > 0) {
if(type.indexOf("top")!=-1) func();
}
if(type.indexOf("down")!=-1) func();
}
}
else if(Math.abs(changeX)<init.x && Math.abs(changeY)<init.y){
eTime = new Date().getTime();
// Событие клика, здесь детализация по времени
if((eTime - sTime) > 300) {
if(type.indexOf("long")!=-1) func(); // Долгое нажатие
}
else {
if(type.indexOf("click")!=-1) func(); // Обработка клика
}
}
if(type.indexOf("end")!=-1) func();
}, false);
};
Перепечатанная статья:JS-события сенсорного экрана телефона
Обработка touch-событий позволяет отслеживать положение каждого пальца пользователя. Вы можете привязать следующие четыре touch-события:
1.touchstart: // При放置 пальца на экран вызывается
2.touchmove: // При движении пальца по экрану вызывается
3.touchend: // При подъеме пальца с экрана вызывается
4touchcancel: // При отмене touch-события системы вызывается. Когда система будет отменять, неясно
свойства
1.client / clientY: //Позиция касания относительно viewport браузера
2.pageX / pageY: //Позиция касания относительно страницы
3.screenX / screenY: //Позиция касания относительно экрана
4.identifier: //Уникальный ID объекта touch
//Событие touchstart
function touchSatrtFunc(e) {
//evt.preventDefault(); //Предотвращение масштабирования браузера, скроллинга и т.д. при касании
var touch = e.touches[0]; //Получение первого касания
var x = Number(touch.pageX); //Координата X точки касания страницы
var y = Number(touch.pageY); //Координата Y точки касания страницы
//Запись начальной позиции касания
startX = x;
startY = y;
}
//Событие touchmove
function touchMoveFunc(e) {
//evt.preventDefault(); //Предотвращение масштабирования браузера, скроллинга и т.д. при касании
var touch = evt.touches[0]; //Получение первого касания
var x = Number(touch.pageX); //Координата X точки касания страницы
var y = Number(touch.pageY); //Координата Y точки касания страницы
var text = 'Событие TouchMove инициировано: (' + x + ', ' + y + ')';
//Определение направления скольжения
if (x - startX != 0) {
//Прокрутка влево-вправо
}
if (y - startY != 0) {
//Прокрутка вверх-вниз
}
}
Переведенная вторая статья:Серия Mobile Web frontend разработка: обработка событий (два)
В предыдущей статье мы говорили о базовых событиях html, в этой статье мы будем подробно讲解触摸ные события. Условия для срабатывания событий касания: контакт пальца с экраном, движение пальца по экрану или отрыв пальца от экрана. Событие является集合ом касаний и начинается с первого placements пальца на экране, заканчивается последним отрывом пальца от экрана. Все касания в процессе от начала до конца события хранятся в одном регистре события.
События touch
События touch можно разделить на два типа: одноточечное касание и многоточечное касание. Одноточечное касание поддерживается на большинстве современных устройств, Safari 2.0 и Android 3.0 и более новых версиях поддерживают многоточечное касание, позволяя одновременно касаться экрана до 5 пальцев, а iPad поддерживает до 11 пальцев одновременно. Мы можем использовать следующий модель событий для захвата этих событий:
ontouchstart ontouchmove ontouchend ontouchcancel
Когда пользователь нажимает палец на экран, срабатывает событие ontouchstart, когда пользователь перемещает один или несколько пальцев, срабатывает событие ontouchmove, когда пользователь удаляет палец, срабатывает событие ontouchend. Когда же срабатывает ontouchcancel? Когда происходят более высокие уровня событий, например, alert, поступает телефонный звонок или появляется уведомление о推送, отменяется текущее действие touch, то есть срабатывает ontouchcancel. Когда вы разрабатываете web-игру, ontouchcancel очень важен для вас, вы можете приостановить игру или сохранить игру при срабатывании ontouchcancel.
События gesture
Рабочий принцип событий gesture аналогичен событиям touch, но событие gesture срабатывает только при наличии на экране по крайней мере двух пальцев, поэтому оно поддерживается Safari 2.0 и Android 3.0 и выше, жесты имеют множество преимуществ, которые помогают нам измерять операции масштабирования и вращения двумя пальцами, модель событий такова:
ongesturestart ongesturechange ongestureend
Свойства события
Независимо от того, используете ли вы события касания или жесты, вам нужно преобразовать эти события в отдельные касания, чтобы использовать их. Для этого вам нужно обращаться к целому ряду свойств объекта события.
targetTouches - все текущие касания к целевому элементу changedTouches - все последние изменения касаний на странице touches - все касания на странице
changedTouches, targetTouches и touches содержат несколько разные списки касаний. targetTouches и touches содержат текущий список пальцев, находящихся на экране, но changedTouches содержит только последние касания. Если вы используете события touchend или gestureend, эта свойство очень важна. В этих случаях на экране больше не будет пальцев, поэтому targetTouches и touches должны быть пустыми, но вы все же можете понять, что произошло в последнюю очередь, если посмотреть на массив changedTouches.
Поскольку свойства касания всегда генерируют массивы, вы можете использовать функции массивов JavaScript для доступа к ним. Это означает, что event.touches[0] вернет первое касание, и вы можете использовать event.touches.length для вычисления текущего количества сохраненных касаний.
Проверяя отдельное касание, используя event.targetTouches[0], вы также можете получить доступ к другим касаниям, каждое из которых содержит一些 конкретную информацию,
clientX, clientY -相对于当前屏幕的X或Y位置 pageX, pageY -相对于整个页面的X或Y位置 screenX, screenY -相对于用户ского компьютера экрана X или Y位置 identifier - уникальный идентификатор события target - объект, генерирующий событие касания
Объект события gestures имеет на два свойства больше, чем обычное событие касания: rotation - угол вращения пальца, scale - значение масштабирования
Перепечатка статьи:JavaScript-события касания и жестов
iOS Safari добавил некоторые специализированные события для передачи разработчикам специальных сообщений. Поскольку устройства iOS не имеют мыши и клавиатуры, обычные события мыши и клавиатуры недостаточно для разработки интерактивных веб-страниц для мобильного Safari. С появлением WebKit в Android многие из таких специализированных событий стали фактическими стандартами.
1. События касания
Когда iPhone 3G, содержащий iOS 2.0, был выпущен, также была выпущена новая версия браузера Safari. Этот новый мобильный Safari предоставлял了一些 новые события, связанные с операциями касания (touch). Позже браузеры на Android также реализовали эти события. События касания срабатывают, когда пользователь放置ает палец на экран, скользит по экрану или отводит палец от экрана. Конкретно, есть следующие события касания:
touchstart: это событие срабатывает при касании экрана пальцем; даже если уже есть палец на экране.
touchmove: это событие срабатывает последовательно, когда палец скользит по экрану. В течение этого события вызов preventDefault() может предотвратить скольжение.
touchend: это событие срабатывает, когда палец отводится от экрана.
touchcancel: это событие срабатывает, когда система прекращает отслеживание касания. О точном триггере этого события документ не уточняет.
Все эти события могут бублить и могут быть отменены. Хотя эти события касания не определены в спецификации DOM, они реализованы в режиме совместимости с DOM. Таким образом, для каждого события касания, которое не определено в спецификации DOM, объект события предоставляет такие свойства, как bubbles, cancelable, view, clientX, clientY, screenX, screenY, detail, altKey, shiftKey, ctrlKey и metaKey, которые обычны для событий мыши.
Кроме обычных свойств DOM, события касания также включают в себя следующие три свойства для отслеживания касаний.
touches: это массив объектов Touch, представляющих текущие отслеживаемые операции касания.
targetTouches: an array of Touch objects specific to the event target.
changeTouches: an array of Touch objects representing what has changed since the last touch.
Each Touch object contains the following properties.
clientX: X-coordinate of the touch target in the viewport.
clientY: Y-coordinate of the touch target in the viewport.
identifier: a unique ID representing the touch.
pageX: x-coordinate of the touch target in the page.
pageY: y-coordinate of the touch target in the page.
screenX: x-coordinate of the touch target in the screen.
screenY: y-coordinate of the touch target in the screen.
target: coordinates of the touched DOM node.
These properties can be used to track user screen touch operations. See the following example.
function handleTouchEvent(event) {
// track the touch only once
if (event.touches.length == 1) {
var output = document.getElementById("output");
switch (event.type) {
case "touchstart":
output.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
break;
case "touchend":
output.innerHTML += "<br>Touch ended (" + event.changedTouches[0].clientX + "," + event.changeTouches[0].clientY + ")";
break;
case "touchmove":
event.preventDefault(); // prevent scrolling
output.innerHTML += "<br>Touch moved (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";
break;
}
}
}
document.addEventListener("touchstart", handleTouchEvent, false);
document.addEventListener("touchend", handleTouchEvent, false);
document.addEventListener("touchmove", handleTouchEvent, false);
Этот код отслеживает одно касание на экране. Для простоты, информация выводится только при одном активном касании. При возникновении события touchstart информация о позиции касания выводится в
Внутри элемента. При возникновении события touchmove отменяется его defaultManager, предотвращается скроллинг (по умолчанию touchmove вызывает скроллинг страницы), и выводится информация о изменений касания. Событие touched выводит информацию о конечных данных касания. Обратите внимание, что при возникновении события touched в наборе touched нет ни одного объекта Touch, так как нет активных касаний; в этом случае необходимо перейти к использованию набора changeTouchs.
Эти события активируются на всех элементах документа, поэтому можно управлять различными частями страницы. При касании элементов экрана последовательность возникновения этих событий такая:
touchstart
mouseover
mousemove
mousedown
mouseup
click
touchend
Браузеры, поддерживающие события касания, включают Safari для iOS, WebKit для Android, beta-версию Dolfin, WebKit для BlackBerry OS 6+, Opera Mobile 10.1 и браузер phantom для эксклюзивной операционной системы LG. В настоящее время только Safari для iOS поддерживает多点ное касание./Desktop Firefox 6+ и Chrome также поддерживают события касания.
2. События жеста
В Safari версии 2.0 для iOS также были введены набор событий жеста. Жесты возникают при касании экрана двумя пальцами и обычно изменяют размер или поворачивают отображаемый элемент. Есть три события жеста, которые выглядят следующим образом.
gesturestart:Активируется, когда один палец уже находится на экране, а другой палец касается экрана.
gesturechange:Активируется при изменении положения любого пальца на экране.
gestureend:Активируется при удалении любого пальца с экрана.
Эти события активируются только в том случае, если оба пальца касаются контейнера приема событий. Установка обработчика событий на элемент означает, что оба пальца должны находиться в пределах этого элемента, чтобы можно было активировать событие жеста (этот элемент является целевым). Поскольку эти события переносятся, обработчик событий может быть установлен на документе, чтобы обрабатывать все события жеста. В этом случае целевым элементом является элемент, в котором оба пальца находятся в пределах его области.
之间存在某种关系。当一个手指放在屏幕上时，会触发touchstart事件。如果另一个手指又放在了屏幕上，则会先触发gesturestart事件。如果另一个手指又放在了屏幕上，则会先触发gesturestart事件，随后触发基于该手指的touchstart事件。如果一个或两个手指在屏幕е скользят, будет инициировано событие gesturechange, но если один из пальцев убирается, будет инициировано событие gestureend, затем инициируется событие touchend, основанное на этом пальце.
Как и при событиях касания, каждый объект события движения手势 содержит стандартные свойства мыши: bubbles, cancelable, view, clientX, clientY, screenX, screenY, detail, altKey, shiftKey, ctrlKey и metaKey. Кроме того, он содержит два дополнительных свойства: rotation и scale. Свойство rotation показывает угол поворота, вызванного изменением пальца, отрицательное значение означает поворот против часовой стрелки, положительное значение означает поворот по часовой стрелке (значение начинается с 0). Свойство scale показывает изменения расстояния между двумя пальцами (например, сжатие уменьшает расстояние); это значение начинается с 1 и увеличивается по мере увеличения расстояния, уменьшается по мере уменьшения расстояния.
Вот пример использования события движения手势:
function handleGestureEvent(event) {
var output = document.getElementById("output");
switch(event.type) {
case "gesturestart":
output.innerHTML = "Движение手势 началось (обturn=" + event.ratation +", масштаб=" + event.scale + ")";
break;
case "gestureend":
output.innerHTML += "<br>Движение手势 завершено (обturn+" + event.rotation + ", масштаб=" + event.scale + ")";
break;
case "gesturechange":
output.innerHTML += "<br>Gesture changed (rotation+=" + event.rotation + ",scale+" + event.scale + ")";
break;
}
}
document.addEventListener("gesturestart", handleGestureEvent, false);
document.addEventListener("gestureend", handleGestureEvent, false);
document.addEventListener("gesturechange", handleGestureEvent, false);
Как и в примере с демонстрацией события касания, приведенном ранее, код здесь просто связывает каждый.event с одной и той же функцией, а затем через эту функцию выводит相关信息 каждого события.
Вот и все, что есть в этой статье, я надеюсь, что это поможет вам в изучении, и希望大家多多支持呐喊教程。
Заявление: содержимое статьи взято из Интернета, авторские права принадлежат соответствующему автору, контент был предложен и загружен пользователями Интернета, сайт не обладает правами собственности, не underwent редактирование人工, и не несет ответственности за соответствующие юридические последствия. Если вы обнаружите подозрительное содержимое о нарушении авторских прав, пожалуйста, отправьте письмо по адресу: notice#oldtoolbag.com (во время отправки письма, пожалуйста, замените # на @) для отчета, и предоставьте соответствующие доказательства, после проверки, сайт немедленно удаляет подозрительное содержимое, нарушающее авторские права.