Введение в расширенное использование жестов в JavaScript

Комментарий: Недавно добавленная поддержка распознавания для расширенного ввода пользователя в IE10, приведите пример: Зарегистрируйте операцию клика, и вы можете знать, какое устройство нажатие текущего пользователя, будь то щелчок пальца, щелчок мыши или щелк

IE10 Недавно добавленная поддержка распознавания для расширенного пользовательского ввода, например: зарегистрировать операцию щелчка, и через предложение AddEventListener вы можете знать, какое устройство нажатие на текущее пользователь, щелчок пальца, щелчок мыши или щелчок стилуса (устройство планшетного устройства будет иметь стилус).

Приведенный выше код может определить, какое устройство является кликом текущего пользователя, и он также делает суждения с помощью метода обратного вызова e.pointertype. Мышь 4, стилус 3, а палец составляет 2. Что касается того, какое оборудование составляет 1, его еще предстоит изучить.

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

addEventListener добавлено событие MSPointerDown

В IE10, на клики пальцев, которые предпочтительны при распознавании таких различных устройств, не влияют на нормальную функцию. Тем не менее, IE10 не только распознает устройство ввода пользователя, но и поддерживает множество расширенных жестов.

Ниже приведена демонстрация поддержки Advanced жестов IE10

Создать объекты жеста

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

var mygesture = new MSSgesure ();

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

elm = document.getElementbyId (cheelement);

mygesture.target = elm;

elm.addeventlistener (MsgestureChange, Handlegesture);

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

elm.addeventlistener (mspointerdown, function (evt) {

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

mygesture.addpointer (evt.pointerid);

});

Примечание. Не забывайте, что вам нужно использовать-MS-Touch-Action для настройки элементов, чтобы они не выполняли сенсорные действия по умолчанию (например, PAN и Zoom), и обеспечить события указателя для ввода.

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

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

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

element.addeventListener ("msgesturehold", Hangehold);

Функциональный hangehold (evt) {

if (evt.detail & evt.msgesture_flag_begin) {

// начало сигнализирует начало жеста. Для жеста удержания это означает, что пользователь удерживал достаточно долго, чтобы жест станет полной прессой и удерживает, если палец будет поднят.

}

if (evt.detail & evt.msgesture_flag_end) {

// конец сигнализирует о конце жеста.

}

if (evt.detail & evt.msgesture_flag_cancel) {

// Отмена сигналов пользователь запустил жест, но отменил его. Для удержания это происходит, когда пользователь перетаскивается перед подъемом. Этот флаг отправляется вместе с конечным флагом, сигнализируя об распознавании жестов завершена.

}

}

Динамические жесты (сокращение, вращение, проведите и перетаскивание)

Динамические жесты (например, сокращение или вращение) будут сообщать в форме преобразования, что очень похоже на преобразование 2D CSS. Динамические жесты могут вызвать три события: msgesturestart, msgestureChange (повторные триггеры по мере продолжения жеста) и MSGestureEnd. Каждое событие содержит информацию о масштабировании (сокращении), вращении, конверсии и скорости.

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

TargetElement.AddeventListener ("msgestureChange", ManipulateElement);

функция ManipulateElement (e) {

// неуместно следующий код, если вы хотите отключить встроенную инерцию, предоставленную динамическим распознаванием жестов

// if (e.detail == e.msgesture_flag_inertia)

// возвращаться;

var m = new mscssmatrix (e.target.style.transform); // Получите новейшее преобразование CSS в элементе

e.target.style.transform = m

.translate (E.OffSetx, E.OffSety) // Переместите происхождение преобразования под центром жеста

. Rotate (E.Rotation * 180 / Math.pi) // Применить вращение

.scale (e.scale) // Применить шкалу

.translate (E.TranslationX, E.Translationy) // Применение перевода

.translate (-e.offsetx, -e.offsety); // переместить перенос преобразования обратно

}

Динамические жесты, такие как масштабирование и вращение, могут поддерживать операции мыши, которые могут быть достигнуты с помощью модификаторов Ctrl или Shift соответственно при вращении колеса мыши.