移动端事件

Posted 2020-09-26 carrie_zhao

一、 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