触摸事件
touchatart
当手指放在手机屏幕上的时候触发
touchmove
当手指在屏幕上移动的时候 持续触发
- touchend 当手指从屏幕上离开时触发
ouchcancel(基本不用)
当系统停止跟踪时触发,系统什么时候取消,文档没有明确的说明。
event.preventDefault(),来阻止屏幕的默认滚动。
出去常用的DOM属性 三个常用触摸属性
**touches 表示当前跟踪得触摸操作touch对象数组**
当一个手指在触屏上时,event.touches.length=1,
当两个手指在触屏上时,event.touches.length=2,
**targetTouches:特定于事件目标的touch对象数组。**
因为touch事件是会冒泡的,所以利用这个属性指出目标对象。
**changedTouches:表示自上次触摸以来发生了什么改变的touch对象的数组。**
每个touch对象都包含下列几个属性:
clientX:触摸目标在视口中的x坐标。
clientY:触摸目标在视口中的y坐标。
identifier:标识触摸的唯一ID。
pageX:触摸目标在页面中的x坐标。
pageY:触摸目标在页面中的y坐标。
screenX:触摸目标在屏幕中的x坐标。
screenY:触摸目标在屏幕中的y坐标。
target:触摸的DOM节点目标。
手势事件
gesturestart:当一个手指已经按在屏幕上,而另一个手指又触摸在屏幕时触发。
gesturechange:当触摸屏幕的任何一个手指的位置发生变化时触发。
gestureend:当任何一个手指从屏幕上面移开时触发。
【注意】只有两个手指都触摸到事件的接收容器时才触发这些手势事件。
触摸事件与手势事件之间的关系
1、当一个手指放在屏幕上时,会触发touchstart事件,如果另一个手指又放在了屏幕上,则会触发gesturestart事件,随后触发基于该手指的touchstart事件。
2、如果一个或两个手指在屏幕上滑动,将会触发gesturechange事件,但只要有一个手指移开,则会触发gestureend事件,紧接着又会触发toucheend事件。
手势得专有属性
rotation:表示手指变化引起的旋转角度,负值表示逆时针,正值表示顺时针,从零开始。
scale:表示两个手指之间的距离情况,向内收缩会缩短距离,这个值从1开始,并随距离拉大而增长。
js批量绑定事件
使用事件代理的方式进行批量事件得绑定
1 | // 假象container 里有两个按钮 btn1 和 btn2 |
JQ同样使用事件代理得方式进行事件得批量绑定