首页 > 代码库 > 移动端事件

移动端事件

一、 touch

  1、touchstart:当手指触碰屏幕时发生,不管当前多少根手指

  2、touchmove:当手指在屏幕上滑动时连续触发,通常我们在滑屏页面,会调用event的preventDefault()可以阻止默认情况的发生;阻止页面滚动

  3、touchend:当手指离开屏幕时触发

  4、touchcancel:系统停止跟踪触摸时触发。例:在触摸时忽然来电话了

二、触摸事件的响应顺序

  1、ontouchstart

  2、ontouchmove

  3、ontouchend

  4、onclick:在移动端有300ms的延时,tap:有150ms的延时

三、Event

  1、originalEvent(原生事件)是jquery封装的事件

  2、targetTouches当前触摸的目标元素,返回一个数组

  3、changedTouches页面上最新更改的所有触摸

  4、touches页面上的所有触摸,如果想选中第一个需要使用touches[0]

  5、clientX、clientY相对于当前屏幕的X或Y位置

  6、pageX、pageY相对于整体页面的X或Y位置

  7、transitionEnd:过渡结束事件

  8、animationEnd:动画结束事件

四、移动端事件框架

  例如:zepto、touch.js,由原生touch事件封装的如下:

  1、swipe:滑动

  2、swipeLeft:左滑动

  3、swipeRight:右滑动

  4、swipeUp:上滑动

  5、swipeDown:下滑动

  6、doubleTap:双击

  7、tap

  8、singleTap

  9、longTap

移动端事件