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.
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
