Go Beyond Pan, Zoom, and Tap Using Gesture Events


Based on your feedback, we’ve improved how sites can build advanced touch experiences using gesture events in IE10 on the Windows8 Release Preview. Earlier we wrote about first stepsWeb developers should take to make sure their sites are touch-friendly and how to build new experiences that work well across input devices, includingmulti-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 nativelypossible 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 coordinatespace 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-actionto configure the element to not perform default touchactions 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: staticgestures (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. Differentfrom 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 usefulif 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, youcan 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

Comments (14)

  1. Jay says:

    Too bad it's not supported in the other browsers – you know, the ones people actually use.

  2. planetarian says:

    Windows. Freaking. Seven.

    Come on.

  3. ck says:

    awesome, much needed

    @Jay, troll harder d-bag

  4. Josh T. says:

    Are there any standardisation efforts going on for this technology?

  5. pmbAustin says:

    I'm sure that Chrome and FF on Metro Win8 will support these or similar tags, and from there, standards will grow.

  6. Brian LePore says:

    I undertand that prefixes are being used here because the standard for this stuff is not finalized, but didn't earlier blog posts about IE10 heavily push the "same markup" concept? Don't these examples break that?

  7. pmbAustin says:

    From the IE10 help site:

    "Internet Explorer 10 doesn't use the traditional Favorites from previous versions. Instead, you can pin websites to the Start screen or open a list of pinned sites and frequently visited sites using New tab. If you open Internet Explorer for the desktop, you can use the traditional Favorites, but you can’t access the pinned sites from the Start screen."

    Seriously, Microsoft?  Just read that again… how does that make any sense?  How is that fast and fluid?  How is that just working?  You NEED to reconsider this.  It makes no sense.  IE10-Metro needs access to favorites.  Period.  Please surprise us at release with this feature, even if it's an option you have to turn on (though it should just be available to everyone all the time).

  8. crash test says:

    This is not a bug, it's a feature…

    http://crashie8.com/

  9. Tim says:

    1. Where is the Windows 7 version!?!?!

    2. The comment form on this blog is still broken!! It's a 1 line fix people! Come on seriously how long do we have to wait for this?!

    3. Please add the link to the W3C proposal that you made for gestures to work towards a standard vs going it alone and creating IE only code that was the downfall of your browser and company name for over a decade!!!

    4. Where are the bookmarks (aka Favorites) in Metro IE?!?!? Hiding them because you don't know where to put them is not a solution!

    Tim

  10. Real McCoy says:

    Edit area (http://www.cdolivet.com/editarea) is an open source rich code-editor library written in JavaScript, using iframe and DHMTL. In IE10 and IE9, the editor lose track of the mouse events and make the experience cluttered. Check out the live demo http://www.cdolivet.com/…/exemple_full.html

    This issue is also found on other websites as well, including Windows Phone's IE9. Please refer to connect bug connect.microsoft.com/…/problems-with-popups-iframe-based-rich-text-editors-cs-cart-windowsteamblog-etc for further info.

  11. Xero says:

    @Real McCoy, EditArea is using isIE and isGecko in javascript. Download the code and replace isIE with isGecko in edit_area_full.js and it will behave correctly in IE9. More precisely, just replace:

    isIE=(navigator.appName=="Microsoft Internet Explorer")

    to

    isGecko=(navigator.appName=="Microsoft Internet Explorer")

    Its the wrong way of coding JS and one of the known bad-practice: browser-sniffing as opposed to feature-detection and behavior-detection. Read more on: blogs.msdn.com/…/same-markup-writing-cross-browser-code.aspx

  12. Jens says:

    Runs horrible on my Windows 8  Atom Tablett.

    Bad work

  13. Mark says:

    The best Gesture Microsoft could make would be fixing the comment form on this blog!

    We've told you how to fix it many times – now its just insulting that you make ZERO effort to fix it!

    Not impressed.

  14. Mike says:

    @Xero – while I understand that you're trying to help – changing isGecko blindly to be only true if the browser is IE is even worse!

    Use feature detection wherever possible… And only use hard coded agent sniffing when dealing with known IE versions and known IE bugs.

    E.g. If you are using getElementById(id) and you know that you need to provide a workaround for IE6 and IE7 due to the 2 bugs with this method – only then sniff for the userAgent.