Touch移动端事件
1.移动端原生事件
(1) 移动端原生三大事件
① touchstart:触摸开始事件 当手指按在屏幕上触发该事件
② touchmove:触摸移动事件 当手指按在屏幕上 并移动 触发该事件
③ touchend:触摸结束事件 当手指离开屏幕触发该事件
④ 注意:在切换到浏览器的移动端模拟器中的时候 需要 刷新页面 才能实现效果
⑤ 注意:浏览器的移动端模拟器 不稳定 因此用on方式添加的事件有时会不能执行,因此我们一般使用addEventListener来绑定移动端事件
(2) 移动端事件的问题
① 移动端中不能使用PC端事件,有些pc端事件在移动端中会出现效果问题,另一些虽然效果没问题,但会延迟300ms执行。
②
(3) 移动端事件的事件对象
① 移动端事件的事件对象 就是处理函数的第一个形参
②
③ 移动端事件对象中独有的属性
1) touches:当前屏幕上所有手指的集合(是一个伪数组,每一个数组项是一个对象,用来记录手指信息,有几根手指就有几个对象)
2) targetTouches:当前dom元素中存在的手指集合
3) changedTouches:当前触发事件的手指集合(一般常用)
2.Touch.js 插件
(1) Touch.js是移动设备上的手势识别与事件库, 由百度云Clouda团队维护,也是在百度内部广泛使用的开发工具.
(2) Touch.js手势库专为移动设备设计, 请在Webkit内核浏览器中使用。
(3) Touch.js绑定事件
① 方式:touch.on(添加事件的元素,“事件类型”,function(){事件处理函数})
② 一次性绑定多个事件:touch.on(元素,”时间类型1 事件类型2 ...”,function(){})
(4) Touch.js事件委托
① 方式:touch.on(共同的父元素, 事件类型, 子元素选择器,处理函数);
② Touch的事件委托 会将 事件绑定给 父元素 根据子元素选择器 选中父元素中指定的子元素,一旦点击这些子元素 就执行处理函数
(5) Touch事件的事件对象
① 获取方式:
②
③ 事件对象中的重要属性
1) originEvent:原始事件对象 封装的事件的事件对象
2) startRotate:开始旋转 是一个开关 调用之后 才可以使用旋转类手势事件
(6) Touch.js的手势事件 及 实例
① 点击类事件:tap单击事件 doubletap双击事件 hold长按事件700ms以上
② 滑动类事件
1) swipestart滑动手势起点事件 当用户按住屏幕并刚刚开始滑动的时候就触发该事件 只触发一次
2) swiping滑动中 在用户滑动的全过程中 会不断触发该事件
3) swipeend滑动手势终点 当用户松手结束滑动的时候触发
③拖动类事件
⑴dragstart 拖动开始
⑵drag 拖动
⑶dragend 拖动结束
④旋转类事件
⑴rotateleft 向左旋转
⑵totateright 向右旋转
⑶rotate 旋转
⑤缩放类事件
⑴pinchstart 缩放手势起点
⑵pinchend 缩放手势终点
⑶pinch 缩放手势
⑷pinchin 收缩
⑸pinchout 放大