移动端触摸(touch)事件

目有个交互需要实现手指滑动的交互,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的行为,则可以触发该事件。

  上面的三个触摸事件每个事件都有以下列表

    changedTouches:保存了所有引发事件的手指信息

    targetTouches:保存了当前对象上所有触摸点的列表;

    touches:保存了当前所有触碰屏幕的手指信息

        每个事件有列表,每个列表还有以下属性

pageX    //相对于页面的 X 坐标
pageY    //相对于页面的 Y 坐标
clientX  //相对于视区的 X 坐标
clientY  //相对于视区的 Y 坐标
screenX  //相对于屏幕的 X 坐标
screenY  //相对于屏幕的 Y 坐标
 
identifier // 当前触摸点的惟一编号
target   //手指所触摸的 DOM 元素

三、tap类事件

触碰事件,我目前还不知道它和touch的区别,一般用于代替click事件,有tap longTap singleTap doubleTap四种之分

tap: 手指碰一下屏幕会触发

longTap: 手指长按屏幕会触发

singleTap: 手指碰一下屏幕会触发

doubleTap: 手指双击屏幕会触发

四、swipe事件

滑动事件,有swipe swipeLeft swipeRight swipeUp swipeDown 五种之分

swipe:手指在屏幕上滑动时会触发

swipeLeft:手指在屏幕上向左滑动时会触发

swipeRight:手指在屏幕上向右滑动时会触发

swipeUp:手指在屏幕上向上滑动时会触发

swipeDown:手指在屏幕上向下滑动时会触发

猜你喜欢

转载自www.cnblogs.com/jing-tian/p/11049705.html