Javascript高级手势如何使用

本文小编为大家详细介绍“Javascript高级手势如何使用”，内容详细，步骤清晰，细节处理妥当，希望这篇“Javascript高级手势如何使用”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

  在IE10中新加入的对高级用户输入的识别支持，说明说明：注册一个点击操作，通过一句addEventListener就能够知道当前用户的点击是哪种设备，是手指的点击，是鼠标的垂直还是触摸笔的点击（平板设备都会带有触控笔）。

 < canvas  id =“ MyCanvas” > </ canvas >

    <脚本>

        MyCanvas.addEventListener（“ MSPointerDown ” ，MyBack，  false ）;

        函数 MyBack（e）{

            alert（e.pointerType.toString（））;

        }

    </脚本>

 超过这段代码就是能够识别出当前用户的点击是设备，通过另一种方法中e.pointerType还进行判断。鼠标是4，触控笔是3，手指是2。至于只能1是可选设备还有待研究。

还有需要注意的就是想在javascript中添加对输入设备的识别，注册的方法事件也是有点点区别。

addEventListener添加的事件为MSPointerDown

而在IE10中对于此类的多种设备识别中优先处理的手指的点击，则是不影响功能正常提示的情况下。而IE 10不仅仅能识别用户的输入设备还支持非常多的高级手势

创建手势对象

在您的网站中处理手势的第一步是实例化手势对象。

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);

});

注意：请不要忘记您需要使用&ndash;ms-touch-action来配置元素以防止其执行重置触摸操作（例如，平移和缩放），并为输入提供指针事件。

处理手势事件

一旦手势对象具有有效目标并至少添加了一个指针，则其将开始触发手势事件。手势事件可分为两种：静态手势（例如，点击或保持）和动态手势（例如，收缩，旋转和轻扫）。

点击

最基本的手势识别是点击。当检测到点击时，将会在手势对象的目标元素触发MSGestureTap事件。指向事件，点击手势只能在用户触摸，按鼠标按钮或使用手写笔触摸而不移动时触发。如果您要区分用户点击元素和预先元素的操作，这一点通常会引起非常有用。

长按

长按手势是指用户使用一个手指触摸屏幕，并保持片刻并抬起而不移动的操作。在长按交互期间，MSGestureHold事件会针对手势的各种状态而多次触发：

复制代码代码如下： www.mb5u.com

element.addEventListener（“ MSGestureHold”，handleHold）;

function handleHold（evt）{

if（evt.detail＆evt.MSGESTURE_FLAG_BEGIN）{

//开始表示手势开始。对于保持姿势，这意味着用户已经持有足够长的时间到位手势将成为一个完整的PR如果手指抬起ESS和保持。

}

if（evt.detail＆evt.MSGESTURE_FLAG_END）{

//结束表示手势结束。

}

if（evt.detail＆evt.MSGESTURE_FLAG_CANCEL）{

//取消表示用户开始手势但取消了手势。为了保持，当用户在举起之前将其拖开时，会发生这种情况。该标志与“结束”标志一起发送，表示手势识别已完成。

}

}

动态手势（收缩，旋转，轻扫和转化）

动态手势（例如，收缩或旋转）将以转换的形式报告，这与CSS 2D转换颇为类似。动态手势可触发此类事件：MSGestureStart，MSGestureChange（触摸的持续而重复触发）和MSGestureEnd。每个事件都包含缩放（收缩），旋转，转换和速度等相关信息。

由于动态手势以转换的形式报告，因此使用包含CSS 2D转换的MSGesture来操作诸如照片或拼图等元素将变得非常轻松。例如，您可以通过以下方式启用缩放，旋转和重置元素的操作：

复制代码代码如下： www.mb5u.com

targetElement.addEventListener（“ MSGestureChange”，handlerElement）;

函数handleElement（e）{

//如果要禁用动态手势识别提供的内置惯性，请取消注释以下代码

// if（e.detail == e.MSGESTURE_FLAG_INERTIA）

// return;

var m = new MSCSSMatrix（e.target.style.transform）; //在元素上获取最新的CSS变换

e.target.style.transform = m

.translate（e.offsetX，e.offsetY）//将变换原点移动到手势的中心

下方.rotate（e.rotation * 180 / Math.PI）//应用旋转

.scale（e.scale）//应用比例

.translate（e.translationX，e.translationY）//应用平移

.translate（-e.offsetX，-e.offsetY）; //将转换原点移回

}

缩放和旋转等动态手势可支持鼠标操作，具体可通过在旋转鼠标滚轮的同时分别使用CTRL或SHIFT修饰键来实现。

读到这里，这篇“Javascript高级手势如何使用”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注编程网行业资讯频道。