События жестов

События жестов надстраиваются над моделью событий указателя W3C. События жестов служат для распознавания и обработки более сложных сенсорных взаимодействий с пользователем (например, сжатие, поворот, прокрутка и перетаскивание) без необходимости самостоятельно фиксировать и обрабатывать отдельные события указателя.

Примечание  API, рассматриваемые в этом разделе, не поддерживаются в Windows 7 и более ранних версиях.

События жестов и объект MSGesture

Первым этапом обработки жестов на сайте является создание экземпляра объекта жеста.


var myGesture = new MSGesture();

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


elm = document.getElementById("someElement");
myGesture.target = elm;
elm.addEventListener("MSGestureChange", handleGesture);

Наконец, нужно сообщить объекту жеста, какие указатели должны обрабатываться для распознавания жеста.


elm.addEventListener("pointerdown", function (evt) {
// adds the current mouse, pen, or touch contact for gesture recognition
myGesture.addPointer(evt.pointerId);
});

Примечание  Свойство CSS touchAction позволяет настроить элемент так, чтобы он не выполнял действия касания по умолчанию (сдвиг, масштабирование и т. п.), а передавал события указателя для ввода. Подробнее см. в разделе Управление сенсорным взаимодействием по умолчанию.

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

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

Флаг жестаЗначениеОписание
MSGESTURE_FLAG_NONE0Обычное состояние.
MSGESTURE_FLAG_BEGIN1Событие жеста начато.
MSGESTURE_FLAG_END2Событие жеста завершено.
MSGESTURE_FLAG_CANCEL4Событие жеста отменено. Этот флаг часто используется в сочетании с MSGESTURE_FLAG_END (операция AND).
MSGESTURE_FLAG_INERTIA8Жест находится на этапе инерции. Этот флаг постоянно отправляется в событии MSGestureChange, пока элемент на экране передвигается.

 

Подробнее см. в разделе "Примечания" справочника Gesture flags.

Простые и сложные жесты

События жестов могут быть простыми (например, касание или удерживание) или сложными (например, сжатие, поворот или прокрутка).

Касание

Проще всего распознается жест касания. Когда обнаруживается касание, в целевом элементе объекта жеста создается событие MSGestureTap. В отличие от события click, жест касания срабатывает, только когда пользователь касается экрана (либо нажимает кнопку мыши или касается экрана пером), а затем отпускает палец (кнопку или перо) без перемещения. Это удобно, чтобы отличить касание элемента от перетаскивания.

Нажатие и удерживание

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


element.addEventListener("MSGestureHold", handleHold);
function handleHold(evt) {
if (evt.detail & evt.MSGESTURE_FLAG_BEGIN) {
// Begin signals the start of a gesture. For the hold gesture, this means the user has been holding long enough in place that the gesture will become a complete press & hold if the finger is lifted.
}
if (evt.detail & evt.MSGESTURE_FLAG_END) {
// End signals the end of the gesture.
}
if (evt.detail & evt.MSGESTURE_FLAG_CANCEL) {
// Cancel signals the user started the gesture but cancelled it. For hold, this occurs when the user drags away before lifting. This flag is sent together with the End flag, signaling the gesture recognition is complete.
}
}


Сложные жесты (сжатие, поворот, прокрутка и перетаскивание)

Динамические жесты, такие как сжатие или поворот, передаются в виде преобразований, аналогичных двухмерным преобразованиям CSS. Для динамических жестов создаются три события: MSGestureStart, MSGestureChange (постоянно создается, пока выполняется жест) и MSGestureEnd.

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


targetElement.addEventListener("MSGestureChange", manipulateElement);
function manipulateElement(e) {
// Uncomment the following code if you want to disable the built-in inertia provided by dynamic gesture recognition
// if (e.detail == e.MSGESTURE_FLAG_INERTIA)
// return;
 
var m = new MSCSSMatrix(e.target.style.transform); // Get the latest CSS transform on the element
e.target.style.transform = m
.translate(e.offsetX, e.offsetY) // Move the transform origin under the center of the gesture
.rotate(e.rotation * 180 / Math.PI) // Apply Rotation
.scale(e.scale) // Apply Scale
.translate(e.translationX, e.translationY) // Apply Translation
.translate(-e.offsetX, -e.offsetY); // Move the transform origin back
}


Динамические жесты, подобные масштабированию и повороту, поддерживаются с помощью мыши. Для этого нужно прокрутить колесико мыши, нажав клавишу-модификатор CTRL (масштабирование) или SHIFT (поворот).

Инерция

Инерция — это движение, которое продолжается после прекращения контакта с экраном. Поддержка инерции встроена в объекты жестов и не требует дополнительного кода, кроме обработчиков событий. За событием MSInertiaStart следует последовательность событий MSGestureChange (в зависимости от скорости прокрутки), а затем создается событие MSGestureEnd. Событие MSInertiaStart создается, только если скорость достаточна для прокрутки, что помогает вашему коду различать быстрое и медленное движение.

Справочник по API

MSGesture
MSGestureEvent
MSManipulationEvent

Примеры и учебники

Исследование множества Мандельброта с помощью HTML5
Имитация наведения указателя на устройствах с поддержкой сенсорного ввода
Использование полотна, SVG и мультисенсорной технологии для создания игры-головоломки на основе плиток
Подготовка сайта к сенсорному вводу
Пример указателей и жестов

Демонстрационные ролики Internet Explorer Test Drive

Mandelbrot Explorer
Browser Surface
Touch Effects (Эффекты касания)
Brick Breaker (Дробилка для кирпича)

Записи блога IEBlog

Internet Explorer 11: сенсорное управление просмотром современных веб-сайтов и не только
На пути к совместимым событиям указателя: развитие событий ввода для нескольких устройств
Выход за рамки сдвига, масштабирования и касания с помощью событий жестов
Рекомендации по созданию сайтов с поддержкой сенсорного управления
Обработка мультисенсорного ввода и ввода с помощью мыши во всех браузерах
Сенсорный ввод для Internet Explorer 10 и приложений Магазина Windows

Связанные разделы

Создание универсального виртуального сенсорного джойстика, работающего со всеми сенсорными моделями благодаря Hand.js
Hand.js: универсальный заполнитель для поддержки событий указателя в каждом браузере
События указателя
Прокрутка и масштабирование с помощью сенсорного управления

 

 

Показ:
© 2014 Microsoft