移動觸摸事件、觸摸坐標的使用

移動上的事件

移動端上使用click

移動端上使用click的問題

click延時（300ms）

很少見的難以觸發click事件

觸摸事件

蹤觸摸的屬性

touches：表示當前跟蹤的觸摸操作的touch對象的數組

當一個手指在觸屏上時，event.touches.length=1

當兩個手指在觸屏上時，event.touches.length=2，以此類推

changedTouches：導致觸摸事件被觸發的觸摸點數組

targetTouches：特定于事件目標的touch對象數組

9.6.2.Zepto的選擇器、方法、事件完成移動特效制作

Zepto概述

Zepto是一個輕量級的針對現代高級瀏覽器的JavaScript庫

Zepto是專門為現代智能手機瀏覽器推出的JavaScript框架

設計目的是提供jQuery類似的API觸摸屏的事件

Zepto框架下載

www.zeptojs.cn網站上通過點擊Download打開下載頁面

下載的zepto文件只要包括core、Ajax、Event、Form、IE這些模塊。其中并沒有包括Effects和Touch模塊。所以后續在使用zepto的這些功能的時候還需要添加相關的插件或重新下載完整版的zepto

Zepto和jQuery的區別

針對移動端程序，Zepto有一些基本的觸摸事件可以用來做觸摸屏交互，Zepto是不支持IE瀏覽器的

Dom操作的區別：添加id時jQuery不會生效而Zepto會生效

事件觸發的區別：使用jQuery時load事件的處理函數不會執行；使用Zepto時load事件的處理函數會執行

事件委托的區別

width()和height()的區別

Zepto由盒模型(box-sizing)決定，用.width()返回包含border等的結果，用.css('width')返回賦值width的結果

jQuery會忽略盒模型，始終返回內容區域的寬/高(不包含padding、border)

offset()的區別

Zepto返回{top,left,width,height}

jQuery返回{top,left}

Zepto無法獲取隱藏元素寬高，jQuery 可以

Zepto中沒有為原型定義extend方法而jQuery有

Zepto的each方法只能遍歷數組，不能遍歷JSON對象

9.6.3.Zepto的transform來制作動畫

通過www.zeptojs.cn網站下載的默認核心文件Zepto在這里就不能使用，為什么？

默認的zepto文件不包括Effects和Touch模塊

通過訪問github地址：https://github.com/madrobby/zepto下載到所需要的完整zepto文件

9.6.4.Zepto的觸摸事件和插件來完成動畫特效

Touch

tap ：元素被觸摸的時候觸發

singleTap and doubleTap：這一對事件可以用來檢測元素上的單擊和雙擊

longTap：當一個元素被按住超過750ms觸發

swipe、swipeLeft、swipeRight、swipeUp、swipeDown：當元素被劃過時觸發