[js点击]JavaScript之原生手势事件详解03
手势事件1.手势事件分类gesturestart:当一个手指已经按在屏幕上,而另一个手指又触摸在屏幕时触发。gesturechange:当触摸屏幕的任何一个手指的位置发生变化时触发。gestureend:当任何一个手指从屏幕上面移开时触发。2.注意事项只有两个手指都触摸到事件的接收容器时才触发这些手势事件。3.触摸事件与手势事件之间的关系1、当一个手指放在屏幕上时,会触发touchstart
·
前两篇已经介绍相关的事件:
[js点击]JavaScript之触摸事件之touch.js详解02
手势事件
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>
更多推荐
已为社区贡献1条内容
所有评论(0)