Safari

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

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

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

Интерактивный элемент представляет собой ссылку, элемент формы, область карты изображения, или любой другой элемент с mousemove, mousedown, mouseup или onclick обработчиками. Прокручиваемый элемент - любой элемент с соответствующим стилем переполнения, текстовые поля и прокручиваемыми элементы фрейма. Из-за этих различий, Вам, возможно, потребуется изменить некоторые элементы в кликабельные элементы, как описано в "Создание кликабельных элеменов", чтобы получить желаемое поведение в iOS.

Кроме того, вы можете отключить поведение iOS по умолчанию для Safari, и обрабатывать собственные сенсорные жесты и события, непосредственно. Обработка сенсорных жестов и событий, непосредственно дает разработчикам возможность реализовать уникальный сенсорный экранный интерфейс похожий на нативные приложения. Читайте "Обработка Multi-Touch Событий" и "Обработка событий жестов", чтобы узнать больше о событиях DOM touch.

Если вы хотите изменить макет веб-страницы в зависимости от ориентации iOS, читайте "Обработка события ориентации".

См. "Поддерживаемые события" для получения полного списка событий поддерживаемых в iOS.

На iOS, эмуляция события мыши передается так быстро, что down или active псевдо состояние кнопок никогда не может произойти. Читайте "Подсветка элементов" о том, как настроить кнопку, чтобы она вела себя, как в настольной системе.

 

Однопальцевые события

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

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

Жест скролирования страницы:

iphone events pan

Жест нажатия и удерживания:

iphone events info

Наконец, двойное нажатие не генерирует ни каких, либо событий как показано на рисунке.

iphone events double tap

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

iphone events 1 finger

Двухпальцевые события

Жест раскрытия щепотки не генерирует никаких событий мыши, как показано на следующем рисунке:

iphone evenrs 2 finger pinch

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

  • Если пользователь касается двумя пальцами на прокручиваемый элемент и перемещает пальцы, генерируются события mousewheel.
  • Если элемент не прокручиваемый, Safari на iOS скроллирует веб-страницу. Во время прокрутки события не генерируются.
  • Событие onscroll генерируется, когда пользователь прекращает прокрутку.
iphone events 2 finger scroll  

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

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

Создание кликабельных элементов

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

<span onmouseover = "..."
  onmouseout  = "..."
 
WHERE TO BUY
 
</span>

Для устранения этого добавьте фиктивный обработчик onclick,onclick = "void(0)", чтобы iOS Safari опредилило span элемент как интерактивный, как показано ниже:

<span onmouseover = "..."
  onmouseout  = "..."
  onclick = "void(0)">
 
WHERE TO BUY
 
</span>
 

Обработка Multi-Touch Событий

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

Если вы зарегистрировались для multi-touch событий, система постоянно посылает TouchEvent объекты на те элементы DOM к которым происходит прикосновение пальцев и движение по поверхности. Они направляются в дополнение к эмулируемым событиям мыши, если не предотвратить это поведение по умолчанию.

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

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

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

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

  1. Зарегистрируйте обработчики для multi-touch событий в 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. Реагируйте на multi-touch события путем реализации обработчиков JavaScript.
    function touchStart(event) { // пример реализации метода touchStart
      // 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 // количество прикосновений
  8. Получите конкретный объект Touch с индексом i:
    var touch = event.touches[i];

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

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

Вы также можете комбинировать multi-touch события с 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)';
}

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

  1. Начало жеста, если вы получаете touchstart событие, содержащее две цели касания.
  2. Окончания жеста, если вы получаете touchend событие, не имеющее предшествующего события touchmove.

Кроме того, вы можете определить жест выделения следующим образом:

  1. Начало жеста, если вы получаете touchstart событие, содержащее одну цель касания.
  2. Прерывание жеста, если в любое время, на ваш приемник события поступает более одного касания.
  3. Продолжение жеста, если вы получаете touchmove событие в основном направлении х.
  4. Прерывание жеста, если вы получаете touchmove событие в основном направлении y.
  5. Окончание жеста, если вы получаете touchend событие.
 

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

Multi-touch события могут быть объединены вместе, чтобы сформировать высокоуровневые жесты.

GestureEvent объекты также отправляются в multi-touch последовательности. События жестов содержат информацию о масштабировании и повороте, позволяющую жестам объединеняться, если это поддерживается платформой. Если не поддерживается, один жест заканчивается раньше, чем начинается другой. Просмотрите GestureEvent объект если вы хотите ответить только на жесты, а не на низкоуровневые объекты TouchEvent.

Выполните следующие шаги, чтобы использовать события жестов в веб-приложении.

  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.
    function gestureChange(event) { // пример реализации обработчика gestureChange
      // Здесь Ваш код
    }
  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, посылается событие. При обработке этого события в веб-контенте, вы можете определить текущую ориентацию устройства и сделать изменения макета, соответственно. Например, отображать простые текстовые списки в портретной ориентации и добавить столбец иконок в горизонтальной ориентации.

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

<body onorientationchange="updateOrientation();">

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

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

Следующий листинг добавляет обработчик ориентации элемента body и реализует метод updateOrientation на JavaScript для отображения текущей ориентации на экране. В частности, когда происходит событие orientationchange, вызывается метод updateOrientation, который изменяе отображение строк, в div элементах в body.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
    <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 и при каких условиях они генерируются. Нижеприведенная таблица указывает, какие события генерируются Safari iOS и какие генерируются условно в зависимости от типа выбранного элемента. В этой таблице также перечислены неподдерживаемые события.

СобытиеГенерируетсяУсловноеДоступно
abortДаНетiOS 1.0 и выше.
blurДаНетiOS 1.0 и выше.
changeДаНетiOS 1.0 и выше.
clickДаДаiOS 1.0 и выше.
copyНетN/A 
cutНетN/A 
dragНетN/A 
dropНетN/A 
focusДаНетiOS 1.0 и выше.
gesturestartДаN/AiOS 2.0 и выше.
gesturechangeДаN/AiOS 2.0 и выше.
gestureendДаN/AiOS 2.0 и выше.
loadДаНетiOS 1.0 и выше.
mousemoveДаДаiOS 1.0 и выше.
mousedownДаДаiOS 1.0 и выше.
mouseupДаДаiOS 1.0 и выше.
mouseoverДаДаiOS 1.0 и выше.
mouseoutДаДаiOS 1.0 и выше.
orientationchangeДаN/AiOS 1.1.1 и выше.
pagehideДаНетiOS 4.0 и выше.
pageshowДаНетiOS 4.0 и выше.
pasteНетN/A 
resetДаНетiOS 1.0 и выше.
selectionНетN/A 
submitДаНетiOS 1.0 и выше.
touchcancelДаN/AiOS 2.0 и выше.
touchendДаN/AiOS 2.0 и выше.
touchmoveДаN/AiOS 2.0 и выше.
touchstartДаN/AiOS 2.0 и выше.
unloadДаНетiOS 1.0 и выше.
 
 
homeЗаметили ошибкукарта сайта 
   Made on a Mac