移动端前端常见的触摸相关的事件touch、tap、swipe等

一、click事件

单击事件,类似于PC端的click,但在移动端中,连续click的触发有200ms ~ 300ms的延迟

二、touch类事件(即触摸事件)

touchstart:手指触碰到屏幕会触发;

touchmove:手指在屏幕上移动会触发;

touchend:手指离开屏幕会触发;

touchcancel:可由系统进行的触发,比如手指触摸屏幕的时候,突然alert了一下,或者系统中其他打断了touch的行为,则可以触发该事件。

以上的这些时间都会冒泡,而且都可以取消冒泡。

触摸事件还提供了下面这些属性:

  • touches: 跟踪返回Touch对象的数组;

  • targetTouchs: 特定事件目标的Touch对象的数组;

  • changeTouchs: 上次触摸以来改变了的Touch对象的数组;

每个Touch对象包含一下的属性:

  • clientX: 触摸目标在浏览器中的x坐标

  • clientY: 触摸目标在浏览器中的y坐标

  • identifier: 标识触摸的唯一ID。

  • pageX: 触摸目标在当前DOM中的x坐标

  • pageY: 触摸目标在当前DOM中的y坐标

  • screenX: 触摸目标在屏幕中的x坐标

  • screenY: 触摸目标在屏幕中的y坐标

  • target: 触摸的DOM节点目标。

三、tap类事件

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

longTap: 手指长按屏幕会触发

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

doubleTap: 手指双击屏幕会触发

四、swipe类事件(即滑动事件)

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

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

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

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

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

猜你喜欢

转载自blog.csdn.net/Judy_qiudie/article/details/82848983
今日推荐