Touch browsing: Go Beyond Pan, Zoom, and Tap Using Gesture Events

Develop a Windows 8 app in 30 days

New browsers like Internet Explorer 10 have advanced touch experiences using gesture events. There are a few first steps you can do to make sure to help your site become touch-friendly yet also have it work well across many input devices while supporting many modern browsers. In this article, I’ll show you how.

Let’s start with a gesture events is the Browser Surface Test Drive demo:

This 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;
 
// Get the latest CSS transform on the element
var m = new MSCSSMatrix(e.target.style.transform); 
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.

You can learn more with in-depth documentation of MSGesture objects and MSGesture events.