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 放大

posted @ 2020-10-14 09:46  石海莹  阅读(309)  评论(0编辑  收藏  举报