[js点击]JavaScript之原生手势事件详解03

前两篇已经介绍相关的事件:
[js点击]JavaScript之触摸事件之touch.js详解02

[js点击]JavaScript之原生触摸事件详解01

手势事件

1.手势事件分类

gesturestart：当一个手指已经按在屏幕上，而另一个手指又触摸在屏幕时触发。
gesturechange：当触摸屏幕的任何一个手指的位置发生变化时触发。
gestureend：当任何一个手指从屏幕上面移开时触发。

2.注意事项

只有两个手指都触摸到事件的接收容器时才触发这些手势事件。

3.触摸事件与手势事件之间的关系

1、当一个手指放在屏幕上时，会触发touchstart事件，如果另一个手指又放在了屏幕上，则会触发gesturestart事件，随后触发基于该手指的touchstart事件。
2、如果一个或两个手指在屏幕上滑动，将会触发gesturechange事件，但只要有一个手指移开，则会触发gestureend事件，紧接着又会触发toucheend事件。

4.手势的专有属性

rotation：表示手指变化引起的旋转角度，负值表示逆时针，正值表示顺时针，从零开始。
scale：表示两个手指之间的距离情况，向内收缩会缩短距离，这个值从1开始，并随距离拉大而增长。

5.适用机型

只能在苹果机上使用,无法在安卓机上测试.

6.实例代码

<script type="text/javascript">
        var div = document.querySelector('div');
            touch.on(div,'gesturechange',function(){
                div.style.background = "blue";
            });
        script>