目有个交互需要实现手指滑动的交互,pc端使用mousedown,mousemove,mouseup监听实现。
但在ios设备上mousemove是不好监听的,同类的方法是touchstart,touchmove,touchend。
项目需求,需要用到拖动事件。由于不需要考虑IE8等低端浏览器的兼容性, 所以想到HTML5中的drag
事件, 发现移动端 android & IOS
并不支持 drag
事件。现在让我们来介绍一下移动端的常用事件吧
一、click点击事件
单击事件,类似于PC端的click,但在移动端中,连续click的触发有200ms ~ 300ms的延迟。
二、touch触摸事件
触摸事件,有touchstart touchmove touchend touchcancel 四种之分,常用的有:
touchstart:手指触摸到屏幕会触发
touchmove:当手指在屏幕上移动时,会触发
touchend:当手指离开屏幕时,会触发
touchcancel:可由系统进行的触发(不常用事件),比如手指触摸屏幕的时候,突然alert了一下,或者系统中其他打断了touch的行为,则可以触发该事件。
2.1事件列表
上面的三个触摸事件每个事件都有以下列表
changedTouches:保存了所有引发事件的手指信息
targetTouches:保存了当前对象上所有触摸点的列表;
touches:保存了当前所有触碰屏幕的手指信息
2.1.1事件属性(只读属性)
每个事件有列表,每个事件列表还有以下属性
比如:想获取手指拖动滑动的坐标位置,直接使用event.clientX是不起作用的,要使用event.changedTouches[0].clientX才好,
如果是jquery的event对象,使用event.originalEvent.changedTouches[0].clientX。
调用事件方法:
(1)jquery方法:$(document).bind("touchend", function(e){});
(2)javascript方法:document.addEventListener("touchend",function(e){});
三、tap类触碰事件
触碰事件,我目前还不知道它和touch的区别,一般用于代替click事件,有tap longTap singleTap doubleTap四种之分,有时会用tap代替click事件
tap: 手指碰一下屏幕会触发
longTap: 手指长按屏幕会触发
singleTap: 手指碰一下屏幕会触发
doubleTap: 手指双击屏幕会触发
四、swipe滑动事件
滑动事件,有swipe swipeLeft swipeRight swipeUp swipeDown 五种之分
swipe:手指在屏幕上滑动时会触发
swipeLeft:手指在屏幕上向左滑动时会触发
swipeRight:手指在屏幕上向右滑动时会触发
swipeUp:手指在屏幕上向上滑动时会触发
swipeDown:手指在屏幕上向下滑动时会触发
五、gesture手势事件
当两个手指触摸屏幕时就会产生手势,手势通常会改变显示项的大小,或者旋转显示项。有三个手势事件,分别如下。
- gesturestart:当一个手指已经按在屏幕上面另一个手指有触摸屏幕时触发。
- gesturechange:当触摸屏幕的任何一个手指的位置发生变化时触发。
- gestureend:当任何一个手指从屏幕上面移开时触发。