使用手势事件实现除平移、缩放和点击之外的其他操作
根据您的反馈，我们在 Windows 8 Release Preview 的 IE10 中改进了网站使用手势事件构建先进触控体验的方式。在之前的博文中我们已讨论 Web 开发人员应首先采取哪些措施来确保他们的网站是触控友好的，还讨论了如何跨输入设备（包括多点触控）并使用跨硬件的指针事件来构建全新的用户体验。本博文涵盖了 IE10 的手势事件。例如，手势事件可以包括浏览器表面测试驱动程序演示，如下方所示。
用户可以使用浏览器表面演示拖动、收缩和旋转照片。
Windows 8 Release Preview 的 IE10 中引入了 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 事件。不同于单击事件，点击手势只能在用户触摸、按鼠标按钮或使用手写笔触控而不移动时触发。如果您要区分用户点击元素和拖动元素的操作，这一点通常会显得十分有用。
长按
长按手势是指用户使用一个手指触摸屏幕，并保持片刻并抬起而不移动的操作。在长按交互期间，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、MSGestureChange（随着手势的持续而重复触发）和 MSGestureEnd。每个事件都包含缩放（收缩）、旋转、转换和速度等相关信息。
由于动态手势以转换的形式报告，因此使用包含 CSS 2D 转换的 MSGesture 来操作诸如照片或拼图等元素将变得十分轻松。例如，您可以通过下列方式启用缩放、旋转和拖动元素的操作：
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 修饰键来实现。
总结
IE10 的手势事件使您可以构建其他任何浏览器当前都尚不具备的触控体验。请访问 MSDN 以获得有关 MSGesture 对象和 MSGesture 事件的深入介绍文档。
使您的网站可使用手势事件来实现除平移、缩放和点击之外的其他操作。
—Internet Explorer 项目经理 Jacob Rossi
Comments
Anonymous
July 01, 2012
翻译真不懂微软，Surface就不要翻译了嘛 期待这个功能很久了，Windows Phone希望也有这个能力，尤其是WP7.xAnonymous
July 01, 2012
@fyter 我觉得这翻译可能是有一部分机器翻译。