手势事件

手势事件构建于 W3C 指针事件模型基础之上。使用手势事件可帮助识别和响应基于触控的更加复杂的用户交互(如收缩、旋转、轻扫和拖动),而不必亲自动手捕捉和解释各个指针事件。

注意  Windows 7 或早期版本不支持本节中讨论的 API。

手势事件和 MSGesture 对象

在网站中处理手势的首要步骤是实例化手势对象。


var myGesture = new MSGesture();

接下来,为手势分配一个 target 元素。浏览器将通过这个元素触发手势事件。还可以通过这个元素确定这些事件的坐标空间。


elm = document.getElementById("someElement");
myGesture.target = elm;
elm.addEventListener("MSGestureChange", handleGesture);

最后,通过手势识别指示手势对象需要处理哪些指针。


elm.addEventListener("pointerdown", function (evt) {
// adds the current mouse, pen, or touch contact for gesture recognition
myGesture.addPointer(evt.pointerId);
});

注意  使用touchAction 级联样式表 (CSS) 属性配置该元素,从而避免其执行平移和缩放等默认触控操作,而是为输入内容提供指针事件。有关更多详细信息,请参阅控制默认触控体验

处理手势事件

一旦手势对象包含有效目标且至少附加一个指针,则将开始触发手势事件。针对这些事件调度的 MSGestureEvent 对象包含 information,与缩放(收缩)、旋转、转换和速度息息相关。其 detail 属性包含有关该手势事件状态的其他信息,并以标志位掩码的形式存在:

手势标志描述
MSGESTURE_FLAG_NONE0正常状态。
MSGESTURE_FLAG_BEGIN1已经启动手势事件。
MSGESTURE_FLAG_END2已经终止手势事件。
MSGESTURE_FLAG_CANCEL4已经取消手势事件。在这种情况下,通常同时显示 ANDed 和 MSGESTURE_FLAG_END。
MSGESTURE_FLAG_INERTIA8手势处于惯性阶段。在屏幕上的元素不断移动的同时,持续通过 MSGestureChange 事件发送此标志。

 

有关详细信息,请参阅 Gesture flags 参考的"备注"部分。

简单手势与复杂手势

手势事件可简(如点击或长按)可繁(如收缩、旋转或轻扫)。

点击

点击是最基本的手势识别功能。当检测到点击手势后,手势对象的 target 元素将触发 MSGestureTap 事件。与 click 事件不同的是,点击手势只有当用户上下触摸(或按鼠标按键,或用笔触控)但不移动时才会触发。若要对点击元素和拖动元素两项用户操作进行区分,这项功能将会十分有效。

长按

长按手势:用户用一个手指向下按并将动作保持一段时间,然后直接抬起手指,且不进行任何移动,即可触发长按手势。长按操作期间,将多次触发 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.
}
}


复杂手势(收缩、旋转、轻扫和拖动)

动态手势(如收缩或旋转)报告的转换形式类似于 CSS2D 转换。为实现动态手势,将会触发以下三个事件:MSGestureStartMSGestureChange(随着手势的继续执行将重复触发)和 MSGestureEnd

由于动态手势会报告转换,用户可以轻松地使用 MSGesture 和 CSS 2D 转换来操作 photo 或 puzzle 等元素。你可以使用代码缩放、旋转以及拖动元素,如下所示:


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
}


使用鼠标滚动鼠标滚轮的同时,分别使用 CTRLSHIFT 修改键即可支持缩放和旋转等动态手势。

关于惯性

惯性是指你不再接触屏幕后的持续运动。惯性支持内置于手势对象,并且无需事件处理程序以外的其他代码。在触发 MSGestureEnd 事件之前,MSInertiaStart 事件后跟一系列 MSGestureChange 事件,具体取决于轻扫的速度。MSInertiaStart 事件仅在实现足够快的轻扫速度时触发,并可帮助代码区分慢速移动和快速轻拂。

API 参考

MSGesture
MSGestureEvent
MSManipulationEvent

示例和教程

如何使用 HTML5 探索曼德布洛特复数集合 (Mandelbrot set)
如何在支持触控的设备上模拟悬停
如何使用画布、SVG 和多点触控来创建平铺拼图游戏
让你的网站支持触控操作
指针和手势示例

有关 Internet Explorer 的 Test Drive 演示

Mandelbrot Explorer
浏览器表面
触控效果
打砖块游戏

IEBlog 文章

IE11:面向现在和未来的 Web 触摸浏览
针对交互指针事件:为多个设备改进输入事件
使用手势事件进行平移、缩放和点击
构建触控友好的站点的指南
处理各种浏览器中的多点触控和鼠标输入
IE10 和 Windows 应用商店应用的触控输入

相关主题

由于 Hand.JS 的关系,创建适用于所有触控型号的通用虚拟触控游戏杆
Hand.js:一个可在每个浏览器上都支持指针事件的 polyfill
指针事件
通过触控进行滚动和缩放

 

 

显示:
© 2014 Microsoft