&nbs p; 在IE10中新加入的对高级用户输入的识别支持，举例说明：注册一个点击操作，通过一句addEventListener 就能够 知道 当前用户的点击是哪种设备，是手指的点击，是鼠标的单击还是触控笔的点击（平板设备都会带有触控笔）。
< canvas id =" ;m yCanvas" ></ canvas >
< script >
MyCanvas.addEventListener( " MSPointerDown " , MyBack, false );
function MyBack(e) {
alert(e.pointerTy PE .toString());
}
</ script >
以上这段代码就是能够识别出当前用户的点击是哪种设备，通过回调的方法中 e.pointerType 还进行判断。鼠标是4，触控笔是3，手指是2。至于值为1是何种设备还有待研究。
还有需要注意的就是 想在javascript中添加对输入设备的识别，注册的方法事件也是有点点区别。
addEventListener 添加的事件为 MSPointerDown
而在IE10中对于这样的多种设备识别中优先处理的手指的点击，前提是 不影响 功能 正常 单击的情况下。然而IE10不仅仅能识别用户的输入设备还支持非常多的高级 手势
以下为IE10高级手势支持的演示
创建手势对象
在您的网站中处理手势的第一步是实例化手势对象。
@H_ 304 _78@
VAR myGesture = new MSGesture();
接下来，为该手势提供一个目标元素。浏览器将对该元素触发手势事件。同时，该元素还可以确定事件的坐标空间。
elm = document.getElementById( "someElement" );
myGesture.t arg et = elm;
elm.addEventListener( "MSGestureChange" , handleGesture);
最后，告知手势对象在手势识别期间处理 哪些 指针。
elm.addEventListener( "MSPointerDown" , function (evt) {
// adds the current mouse, pen, or touch contact for gesture recogn IT ion
myGesture.addPointer(evt.pointerId);
});
注意：请不要忘记您需要使用 –ms -t ouch-action 来配置元素以 防 止其执行默认触摸操作（例如，平移和缩放），并为输入提供指针事件。
处理手势事件一旦手势对象具有有效目标并至少添加了一个指针，则其将 开始 触发手势事件。手势事件可分为两种：静态手势（例如，点击或保持）和动态手势（例如，收缩、旋转和轻扫）。
点击最基本的手势识别是点击。当检测到点击时，将会在手势对象的目标元素触发 MSGestureTap 事件。不同于单击事件，点击手势只能在用户触摸、按鼠标按钮或使用 手写笔 触控而不移动时触发。如果您要区分用户点击元素和拖动元素的操作，这 一点 通常会显得十分有用。
长按长按手势是指用户使用一个手指触摸屏幕，并保持片刻并抬起而不移动的操作。在长按交互期间， MSGestureHold 事件会针 对手 势的各种状态而多次触发：
复制代码
代码如下:
element.addEventListener("MSGestureHold", handleHold);
function handleHold(evt) {
if (evt.det ai l & am p; evt.MSGESTURE_FLAG_BE gin ) {
// Begin signals the start of a gesture. For the Hold gesture, this means the user has been holding long enough in place t hat 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 Drag s 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 -i n inertia PR ovided by dyn ami c gesture recognition
// if (e.detail == e.MSGESTURE_FLAG_INERTIA)
// return;
var m = new MSCSSMatrix(e.target.style.transform); // Get the la test 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 修饰键来实现。
总结
以上是 为你收集整理的 Javascript 高级手势使用介绍 全部内容，希望文章能够帮你解决 Javascript 高级手势使用介绍 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于Javascript 高级手势使用介绍的详细内容...