html5手势缩放的简单介绍

HTML5里的手势操作是如何实现的呢?

举例说明：

成都创新互联专注于观山湖网站建设服务及定制，我们拥有丰富的企业做网站经验。热诚为您提供观山湖营销型网站建设，观山湖网站制作、观山湖网页设计、观山湖网站官网定制、小程序制作服务，打造观山湖网络公司原创品牌,更为您提供观山湖网站排名全网营销落地服务。

通过一句addEventListener 就能够知道当前用户的点击是哪种设备，是手指的点击，是鼠标的单击还是触控笔的点击（平板设备都会带有触控笔）：

canvas id="MyCanvas"/canvas

script

MyCanvas.addEventListener("MSPointerDown", MyBack, false);

function MyBack(e) {

alert(e.pointerType.toString());

}

/script

通过回调的方法中 e.pointerType 还进行判断。

鼠标是4，触控笔是3，手指是2。

至于值为1是何种设备还有待研究。

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

addEventListener 添加的事件为 MSPointerDown

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

虽然有的网页设置了自动全屏，但是点了“x”之后退出了全屏并且视频播放停下来了，点击播放时又全屏了，但是我们可以退出全屏并继续播放，具体方法：在全屏页用两指缩小手势（不是下滑或点“x”，即刻退出全屏并继续播放视频。如果是的，请采纳。

Chrome 只能模拟以下的手势

Tap 触摸

Double-Tap 双击

Hold 长按

Swipe 滑

Drag 拖拽

Rotate 旋转（双指）

Pinch 缩放（双指）

Fingers 抓取（多指）

等手势都不支持，

目前只能模拟鼠标能操作的，具体的还是用真机测试，特别是android 的碎片化，多早几个机器测试才是王道

当前文章：html5手势缩放的简单介绍
本文来源：http://6mz.cn/article/dsohpge.html