События с одним пальцем

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

Панорамирование с одним пальцем не генерирует событий, пока пользователь не прекращает панорамировать — onscroll когда страница прекращает перемещаться и перерисовки — как показано на рисунке 6-1, событие сгенерировано.

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

Наконец, двойное касание не генерирует событий ни один как показано на рисунке 6-3.

События от нажатия мыши поставлены в том же порядке, который Вы ожидали бы в других веб-браузерах, проиллюстрированных на рисунке 6-4. Если пользователь касается неактивируемого по щелчку элемента, никакие события не сгенерированы. Если пользователь касается активируемого по щелчку элемента, события поступают в этот порядок: mouseover, mousemove, mousedown, mouseup, и click. mouseout событие имеет место, только если пользователь касается на другом активируемом по щелчку элементе. Кроме того, если содержание страницы изменяется на mousemove событие, никакие последующие события в последовательности не отправляются. Это поведение позволяет пользователю касаться в новом содержании.

События с двумя пальцами

Повышение открытый жест не генерирует событий от нажатия мыши как показано на рисунке 6-5.

Рисунок 6-6 иллюстрирует события от нажатия мыши, сгенерированные при помощи двух пальцев для панорамирования элемента с возможностью прокрутки. Поток событий следующие:

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

• Если элемент не с возможностью прокрутки, Safari на iOS панорамирует веб-страницу. Никакие события не сгенерированы при панорамировании.

• onscroll когда пользователь прекращает панорамировать, событие сгенерировано.

Форма и события документа

Типичные события, сгенерированные формами и документами, включают blur, focus, load, unload, reset, submit, change и abort. Посмотрите Поддерживаемые События для полного списка поддерживаемых событий на iOS.

Создание активируемых по щелчку элементов

Из-за пути Safari на iOS создает события для эмуляции мыши, некоторые элементы могут не вести себя как ожидалось на iOS. В частности некоторые меню то единственное использование mousemove обработчики, как в Перечислении 6-1, должны быть изменены, потому что iOS не распознает их как активируемые по щелчку элементы.

Перечисление 6-1  меню с помощью обработчика наведения мыши

<span onmouseover = "..."

  onmouseout  = "..."

WHERE TO BUY

</span>

Для фиксации этого добавьте макет onclick обработчик, onclick = “void(0)”, так, чтобы Safari на iOS распознал span элемент как активируемый по щелчку элемент, как показано в Перечислении 6-2.

Перечисление 6-2  , Добавляющее onclick обработчик

<span onmouseover = "..."

  onmouseout  = "..."

  onclick = “void(0)”>

WHERE TO BUY

</span>

Обработка мультисенсорных событий

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

Если Вы регистрируетесь для мультисенсорных событий, система постоянно отправляет TouchEvent объекты к тем элементам DOM как пальцы касаются и преодолевают поверхность. Они отправляются в дополнение к эмулированным событиям от нажатия мыши, если Вы не предотвращаете это поведение по умолчанию, как описано в Предотвращении Поведения По умолчанию. Сенсорное событие обеспечивает снимок всех касаний во время мультисенсорной последовательности, самое главное касания, которые являются новыми или изменились для определенной цели. Различные типы мультисенсорных событий описаны в TouchEvent в Safari Дополнительная Ссылка DOM.

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

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

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

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

1. Обработчики регистра для мультисенсорных событий в HTML следующим образом:

   <div

   ontouchstart="touchStart(event);"

   ontouchmove="touchMove(event);"

   ontouchend="touchEnd(event);"

   ontouchcancel="touchCancel(event);"

   ></div>

2. Также зарегистрируйте обработчики в JavaScript следующим образом:

   element.addEventListener("touchstart", touchStart, false);

   element.addEventListener("touchmove", touchMove, false);

   element.addEventListener("touchend", touchEnd, false);

   element.addEventListener("touchcancel", touchCancel, false);

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

   Например, реализуйте touchStart метод следующим образом:

   function touchStart(event) {

   // Insert your code here

   }

4. Дополнительно, получите все касания на странице с помощью touches свойство следующим образом:

   var allTouches = event.touches;

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

5. Дополнительно, получите все касания для целевого элемента с помощью targetTouches свойство:

   var targetTouches = event.targetTouches;

6. Дополнительно, получите все измененные касания для этого события с помощью changedTouches свойство:

   var changedTouches = event.changedTouches;

7. Получите доступ Touch свойства объектов — такие как цель, идентификатор и расположение на странице, клиенте или координатах экрана — подобный свойствам события от нажатия мыши.

   Например, получите число касаний:

   event.touches.length

   Получите определенный сенсорный объект в индексе i:

   var touch = event.touches[i];

   Наконец, получите расположение в координатах страницы для события единственного пальца:

   var x = event.touches[0].pageX;

   var y = event.touches[0].pageY;

Можно также объединить мультисенсорные события с визуальными эффектами CSS, чтобы позволить перетащить или некоторое другое пользовательское действие. Чтобы позволить перетащить, реализуйте touchmove обработчик событий для перевода цели:

function touchMove(event) {

    event.preventDefault();

    curX = event.targetTouches[0].pageX - startX;

    curY = event.targetTouches[0].pageY - startY;

    event.targetTouches[0].target.style.webkitTransform =

        'translate(' + curX + 'px, ' + curY + 'px)';

}

Как правило, Вы реализуете мультисенсорные обработчики событий для отслеживания одного или двух касаний. Но можно также использовать мультисенсорные обработчики событий для идентификации пользовательских жестов. Т.е. пользовательские жесты, уже не идентифицирующиеся для Вас событиями жеста, описанными в Обработке Событий Жеста. Например, можно идентифицировать жест касания с двумя пальцами следующим образом:

1. Начните жест при получении a touchstart событие, содержащее два целевых касания.

2. Жест конца, если Вы получаете a touchend событие без предыдущего touchmove события.

Точно так же можно идентифицировать сильно ударить жест следующим образом:

1. Начните жест при получении a touchstart событие, содержащее одно целевое касание.

2. Жест аварийного прекращения работы, если, когда-либо, Вы получаете событие с> 1 касание.

3. Продолжайте жест при получении a touchmove событие главным образом в направлении X.

4. Жест аварийного прекращения работы, если Вы получаете a touchmove событие главным образом направление Y.

5. Жест конца, если Вы получаете a touchend событие.

Обработка событий жеста

Мультисенсорные события могут быть объединены вместе для формирования высокоуровневых событий жеста.

GestureEvent объекты также отправляются во время мультисенсорной последовательности. События жеста содержат жесты разрешения информации о масштабировании и вращении, которые будут объединены, если поддерживается платформой. Концы жеста если не поддерживаемый, прежде чем другой запустит. Прислушаться GestureEvent объекты, если Вы хотите реагировать на жесты только, не обрабатывают низкий уровень TouchEvent объекты. Различные типы событий жеста описаны в GestureEvent в Safari Дополнительная Ссылка DOM.

Выполните эти шаги для использования событий жеста в веб-приложении.

1. Обработчики регистра для событий жеста в HTML:

   <div

   ongesturestart="gestureStart(event);"

   ongesturechange="gestureChange(event);"

   ongestureend="gestureEnd(event);"

   ></div>

2. Также зарегистрируйте обработчики в JavaScript:

   element.addEventListener("gesturestart", gestureStart, false);

   element.addEventListener("gesturechange", gestureChange, false);

   element.addEventListener("gestureend", gestureEnd, false);

3. Реагируйте на события жеста путем реализации обработчиков в JavaScript.

   Например, реализуйте gestureChange метод следующим образом:

   function gestureChange(event) {

   // Insert your code here

   }

4. Получите сумму вращения, так как запустился жест:

   var angle = event.rotation;

   Угол находится в градусах, где по часовой стрелке положительно и против часовой стрелки отрицателен.

5. Масштабируйте сумму, так как запустился жест:

   var scale = event.scale;

   Масштаб меньше если меньше, чем 1.0 и больше, если больше, чем 1.0.

Можно объединить события жеста с визуальными эффектами CSS, чтобы позволить масштабироваться, вращаться, или некоторое другое пользовательское пользовательское действие. Например, реализуйте gesturechange обработчик событий, чтобы масштабироваться и повернуть цель следующим образом:

onGestureChange: function(e) {

    e.preventDefault();

    e.target.style.webkitTransform =

        'scale(' + e.scale  + startScale  + ') rotate(' + e.rotation + startRotation + 'deg)';

}

Предотвращение поведения по умолчанию

Поведение по умолчанию Safari на iOS может вмешаться в пользовательское мультикасание Вашего приложения и ввод жеста. Можно отключить поведение браузера по умолчанию путем отправки preventDefault обменивайтесь сообщениями к объекту-событию.

Например, для предотвращения прокрутки на элементе в iOS 2.0 реализуйте touchmove и touchstart обработчики событий следующим образом:

function touchMove(event) {

    // Prevent scrolling on this element

    event.preventDefault();

    ...

}

Для отключения открытого повышения и повышения близкие жесты в iOS 2.0 реализуйте gesturestart и gesturechange обработчики событий следующим образом:

function gestureChange(event) {

    // Disable browser zoom

    event.preventDefault();

    ...

}

Обработка событий ориентации

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

Подобный a resize событие, обработчик может быть добавлен к <body> элемент в HTML следующим образом:

<body onorientationchange="updateOrientation();">

где updateOrientation обработчик, который Вы реализуете в JavaScript.

Кроме того, window объект имеет orientation набор свойств к также 0, -90, 90, или 180. Например, если пользователь запускает с iPhone в портретной ориентации и затем изменяется на альбомную ориентацию путем превращения iPhone вправо, окно orientation свойство установлено в -90. Если пользователь вместо этого изменяется на среду путем превращения iPhone налево, окно orientation свойство установлено в 90.

Перечисление 6-3 добавляет обработчик ориентации к элементу организации и реализует updateOrientation Метод JavaScript для отображения текущей ориентации на экране. В частности, когда orientationchange событие имеет место, updateOrientation метод вызывается, который изменяет строку, выведенную на экран элементом подразделения в организации.

Перечисление 6-3  , Выводящее на экран ориентацию

<!DOCTYPE html>

<html>

    <head>

        <title>Orientation</title>

        <meta name = "viewport" content="width=320, user-scalable=0">

        <script type="text/javascript" language="javascript">

            function updateOrientation()

            {

                var displayStr = "Orientation : ";

                switch(window.orientation)

                {

                    case 0:

                        displayStr += "Portrait";

                    break;

                    case -90:

                        displayStr += "Landscape (right, screen turned clockwise)";

                    break;

                    case 90:

                        displayStr += "Landscape (left, screen turned counterclockwise)";

                    break;

                    case 180:

                        displayStr += "Portrait (upside-down portrait)";

                    break;

                }

                document.getElementById("output").innerHTML = displayStr;

            }

    </script>

    </head>

    <body onorientationchange="updateOrientation();">

        <div id="output"></div>

    </body>

</html>

Поддерживаемые события

Знайте обо всех событиях, что поддержки iOS и при каких условиях они сгенерированы. Таблица 6-1 указывает, какие события сгенерированы Safari на iOS и которые сгенерированы условно в зависимости от типа выбранного элемента. Эта таблица также приводит неподдерживаемые события.