Новые браузеры, такие как Internet Explorer 10, имеют расширенные возможности сенсорного использования событий жестов. Есть несколько первых шагов, которые вы можете сделать, чтобы убедиться, что ваш сайт стал сенсорным, но он также хорошо работает на многих устройствах ввода и поддерживает многие современные браузеры. В этой статье я покажу вам как.
Начнем с событий жестов в демонстрационной версии Browser Surface Test Drive:
Пользователи могут перетаскивать, сжимать и поворачивать фотографии с помощью демонстрационной программы Browser Surface.
Это вводит объекты распознавания жестов в JavaScript. Сайты могут создавать объекты жестов, решать, какие указатели (мышь, перо или сенсорные контакты) обрабатывать, и направлять события жестов в любой элемент по желанию. Затем браузер вычисляет, какой жест выполняется, и уведомляет страницу через события. Это позволяет разработчикам создавать жесты, которые пока еще не возможны ни в одном другом браузере. Они включают в себя несколько одновременных жестов, например, вращение двух частей головоломки своими руками.
Давайте посмотрим, как это работает в коде.
Создание объекта жеста
Первым шагом в обработке жестов на вашем сайте является создание объекта жеста.
var myGesture = new MSGesture();
Затем дайте жесту целевой элемент. Это элемент, с которым браузер будет запускать события жестов. Это также элемент, который определяет координатное пространство для событий.
elm = document.getElementById("someElement"); myGesture.target = elm; elm.addEventListener("MSGestureChange", handleGesture);
Наконец, скажите объекту жеста, какие указатели нужно обработать при его распознавании жеста.
elm.addEventListener("MSPointerDown", function (evt) { // adds the current mouse, pen, or touch contact for gesture recognition myGesture.addPointer(evt.pointerId); });
Примечание: не забывайте, что вам нужно использовать –ms-touch-action чтобы элемент не выполнял сенсорные действия по умолчанию, такие как панорамирование и масштабирование, и вместо этого предоставлял события указателя для ввода.
Обработка событий жестов
Как только объект жеста имеет допустимую цель и хотя бы один указатель добавлен к нему, он начнет инициировать события жеста. События жестов бывают двух видов: статические жесты (например, касание или удержание) и динамические жесты (например, сжатие, поворот или пролистывание).
Нажмите
Основное распознавание жестов — это нажатие. При обнаружении MSGestureTap событие MSGestureTap по целевому элементу объекта жеста. В отличие от события щелчка, жест касания срабатывает только тогда, когда пользователь касается (или нажимает кнопку мыши, или касается ручки) вниз и вверх без движения. Это часто полезно, если вы хотите провести различие между нажатием на элемент пользователем и перетаскиванием элемента.
Нажмите и удерживайте
Жест нажатия и удержания происходит, когда пользователь касается пальцем вниз, на мгновение удерживает его и поднимает без движения. Во время взаимодействия нажатия и удержания событие 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 2D-преобразования. Для динамических жестов MSGestureStart три события: MSGestureStart , MSGestureChange (многократно срабатывает при продолжении жеста) и MSGestureEnd . Каждое событие содержит информацию о масштабе (пинч), вращении, перемещении и скорости.
Поскольку динамические отчеты о жестах преобразуются, легко использовать MSGesture с CSS 2D Transforms для манипулирования таким элементом, как фотография или фрагмент головоломки. Например, вы можете включить масштабирование, вращение и перетаскивание элемента следующим образом:
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 соответственно.
Вы можете узнать больше с подробной документацией объектов MSGesture событий MSGesture .
Эта статья была переиздана с разрешения.