解释touch
- touch是移动端的触摸事件 而且是一组事件
- touchstart 当手指触摸屏幕的时候触发
- touchmove 当手指在屏幕上滑动时触发:move事件是持续触发
- touchend 当手指离开屏幕的时候触发
- touchcancel 当被迫终止滑动的时候触发(来电,弹消息等触碰意外)
绑定事件
使用addEventListener进行绑定,如下
var ul = document.querySelector('ul')
ul.addEventListener('touchstart',function(e){
console.log(e)
})
事件对象
当开始点击打印的事件对象如下图
- TouchList
一个 TouchList 代表一个触摸平面上所有触点的列表; 举例来讲, 如果一个用户用三根手指接触屏幕(或者触控板), 与之相关的TouchList 对于每根手指都会生成一个 Touch 对象, 共计三个.
触摸点(一个手指触摸就是一个触发点,和屏幕的接触点的个数)的集合
targetTouches && touches的区别
- targetTouches
一个TouchList,包含所有仍与触摸平面接触并且touchstart事件与当前事件在同一个目标元素上( target element )发生的Touch对象。
- 语法
var touches = touchEvent.targetTouches;
console.log(e.targetTouches)
2. touches
一个 TouchList,其会列出所有当前在与触摸表面接触的 Touch 对象,不管触摸点是否已经改变或其目标元素是在处于 touchstart 阶段。
- 相同
当手指处于 touchend,离开触摸表面
ul.addEventListener('touchend',function(e){
console.log(e.targetTouches)
console.log(e.touches)
})
- 可见:在离开屏幕的时候两者无法记录触摸点
- 当处于touch事件中也可见:都可以获得一个TouchList列表,里面包含了触碰点的信息。
- 区别
- 这两个在测试时同位置看似打印结果是一致的,只是因为用一根手指点击
- 如果我用两个手指,一个触摸绑定事件的ul(目标元素),另一个触摸除了此ul的其他地方,那么touches和targetTouches就是有区别的了
touches依旧可以获得两个触摸点的信息列表,而targetTouches只能获取一个触摸点的信息列表,(即绑定事件的ul(目标手指)上的那个触摸点)。 - targetTouches只能获取到在其目标元素所有手指的触碰对象,而touches只要有手指在目标元素上,屏幕上其它触碰点也能获取到
changedTouches
每个事件都会记录; 当手指松开时候(touchend),意味着当前元素上已经没有手指对象了,所以无法通过targetTouches来获取手指对象,则这时候要使用changedTouches
其它触碰对象
click
click会有200ms到300ms的延迟,所以我们在使用的时候可以进行封装,或则使用zepto.js的tap来实现点击