移動端事件

標籤：過渡   延時   事件   eve   efault   預設   第一個   end   onclick   

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

移動端事件