Go Beyond Pan, Zoom, and Tap Using Gesture Events

IEBlog

Windows Internet Explorer Engineering Team Blog

Go Beyond Pan, Zoom, and Tap Using Gesture Events

  • Comments 14

Based on your feedback, we’ve improved how sites can build advanced touch experiences using gesture events in IE10 on the Windows 8 Release Preview. Earlier we wrote about first steps Web developers should take to make sure their sites are touch-friendly and how to build new experiences that work well across input devices, including multi-touch, using hardware agnostic pointer events. This post covers IE10’s gesture events. An example of gesture events is the Browser Surface Test Drive demo shown below.

Screen shot of the Browser Surface demo showing pictures randomly arranged on the surface.
Users can drag, pinch, and rotate photos using the Browser Surface demo

IE10 in the Windows 8 Release Preview introduces gesture recognition objects in JavaScript. Sites can create gesture objects, decide which pointers (mouse, pen, or touch contacts) to process, and direct the gesture events at whatever element is desired. The browser then calculates what gesture is being performed and notifies the page via events. This enables developers to build gesture experiences not yet natively possible in any other browser. These include multiple concurrent gestures, for example, rotating two puzzle pieces with your hands.

Let’s take a look at how this works in code.

Creating a Gesture Object

The first step in handling gestures in your site is to instantiate a gesture object.

var myGesture = new MSGesture();

Next, give the gesture a target element. This is the element to which the browser will fire gesture events. It’s also the element that determines the coordinate space for the events.

elm = document.getElementById("someElement");

myGesture.target = elm;

elm.addEventListener("MSGestureChange", handleGesture);

Finally, tell the gesture object which pointers to process in its gesture recognition.

elm.addEventListener("MSPointerDown", function (evt) {

// adds the current mouse, pen, or touch contact for gesture recognition

myGesture.addPointer(evt.pointerId);

});

Note: don’t forget you need to use –ms-touch-action to configure the element to not perform default touch actions like panning and zooming, and instead provide pointer events for the input.

Handling Gesture Events

Once a gesture object has a valid target and at least one pointer added to it, it will begin to fire gesture events. The gesture events come in 2 flavors: static gestures (like tap or hold) and dynamic gestures (like pinch, rotate, or swipe).

Tap

The most basic gesture recognition is a Tap. When a tap is detected, the MSGestureTap event is fired at the target element of the gesture object. Different from the click event, the tap gesture only fires when a user touches (or presses a mouse button, or touches a pen) down and up without moving. This is often useful if you want to differentiate between a user tapping on an element versus dragging the element.

Press and Hold

A press and hold gesture happens when a user touches down with one finger, holds for a moment, and lifts without moving. During a press & hold interaction, the MSGestureHold event fires more than once for the various states of the gesture:

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.

}

}

Dynamic Gestures (pinch, rotate, swipe, and drag)

Dynamic gestures, like pinch or rotate, are reported in the form of transforms similar to CSS 2D Transforms. Three events are fired for dynamic gestures: MSGestureStart, MSGestureChange (fires repeatedly as the gesture continues), and MSGestureEnd. Each event contains information about scale (pinch), rotation, translation, and velocity.

Because dynamic gestures report transforms, it’s easy to use MSGesture with CSS 2D Transforms to manipulate an element like a photo or puzzle piece. For example, you can enable scaling, rotating, and dragging of element as follows:

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

}

Dynamic gestures like scale and rotate are supported with mouse by rotating the mouse wheel with the CTRL or SHIFT modifier keys, respectively.

Summary

IE10’s gesture events enable you to build touch experiences not currently possible in any other browser. See MSDN for in-depth documentation of MSGesture objects and MSGesture events.

Take your sites beyond pan, zoom, and tap using gesture events.

—Jacob Rossi, Program Manager, Internet Explorer

  • Loading...