移动端触摸(touch)事件

匿名 (未验证) 提交于 2019-12-03 00:11:01

目有个交互需要实现手指滑动的交互,pc端使用mousedown,mousemove,mouseup监听实现。

但在ios设备上mousemove是不好监听的,同类的方法是touchstart,touchmove,touchend。

项目需求,需要用到拖动事件。由于不需要考虑IE8等低端浏览器的兼容性, 所以想到HTML5中的drag事件, 发现移动端 android & IOS 并不支持 drag 事件。现在让我们来介绍一下移动端的常用事件吧

一、click点击事件

二、touch触摸事件

2.1事件列表

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

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

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

 

2.1.1事件属性(只读属性)

移动端触摸事件属性里的数组元素的属性:每个事件有列表,每个事件列表还有以下属性

    pageX    //相对于页面的 X 坐标,与 clientX 不同的是,他包括左边滚动的距离,如果有的话。
 
 

三、tap类触碰事件

四、swipe滑动事件

 五、gesture手势事件

  • gesturestart:当一个手指已经按在屏幕上面另一个手指有触摸屏幕时触发。
  • gesturechange:当触摸屏幕的任何一个手指的位置发生变化时触发。
  • gestureend:当任何一个手指从屏幕上面移开时触发。

 

 

 

当有新手指触控到绑定的元素,会触发一次事件。

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!