移動(dòng)端事件(touchEvent)
現(xiàn)在隨著移動(dòng)設(shè)備的出現(xiàn),鼠標(biāo)事件不能夠滿足多指觸控的事件需求,再加上click點(diǎn)擊事件在移動(dòng)端存在延遲,因此在移動(dòng)端出現(xiàn)了移動(dòng)端事件也叫TouchEvent.TouchEvent 是一類描述手指在觸摸平面（觸摸屏、觸摸板等）的狀態(tài)變化的事件。這類事件用于描述一個(gè)或多個(gè)觸點(diǎn)，使開發(fā)者可以檢測(cè)觸點(diǎn)的移動(dòng)，觸點(diǎn)的增加和減少，等等。
touchEvent類型
touchstart 當(dāng)用戶在觸摸平面上放置了一個(gè)觸點(diǎn)時(shí)觸發(fā)。
touchend 當(dāng)一個(gè)觸點(diǎn)被用戶從觸摸平面上移除（當(dāng)用戶將一個(gè)手指離開觸摸平面）時(shí)觸發(fā)。
touchmove 當(dāng)用戶在觸摸平面上移動(dòng)觸點(diǎn)時(shí)觸發(fā)。
touchEvent對(duì)象
touches
代表的是屏幕上總共有幾個(gè)觸點(diǎn)
targetTouches
代表的是綁定事件的元素上有幾個(gè)觸點(diǎn)
changedTouches
相對(duì)于上一次狀態(tài)（進(jìn)入目標(biāo)元素、離開目標(biāo)元素、在目標(biāo)元素上發(fā)生了移動(dòng)）發(fā)生了改變的觸摸點(diǎn)的集合
(在touchend事件里面 只能通過(guò)changedTouches獲取離開目標(biāo)元素的手指)
最后有可能有一個(gè)離開了屏幕 只會(huì)在changedTouches中存在一個(gè)觸點(diǎn)的數(shù)據(jù)
最后有可能有兩個(gè)同時(shí)離開了屏幕 就會(huì)在changedTouches中存在兩個(gè)觸點(diǎn)的數(shù)據(jù)
touch對(duì)象
clientX/Y (推薦用的)
相對(duì)于瀏覽器可視區(qū)域(屏幕)的坐標(biāo)。想要獲取正確的結(jié)果必須寫全viewport的設(shè)置
pageX/Y
相對(duì)于頁(yè)面的坐標(biāo)(頁(yè)面有多大 坐標(biāo)的最大值就有多大 但是想要看到這個(gè)結(jié)果 必須寫全viewport的設(shè)置)
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
screenX/Y(不用 因?yàn)橛屑嫒菪?
相對(duì)于屏幕的坐標(biāo)（谷歌下是相對(duì)于屏幕-火狐下是和clientX/Y是一樣的）
移動(dòng)端手勢(shì)介紹
手勢(shì)封裝
tap手勢(shì):單擊 判斷起始點(diǎn)的坐標(biāo)和終止點(diǎn)的坐標(biāo)是否一致
drag手勢(shì):拖拽 就是把一個(gè)物體從一個(gè)地方拖拽到另一個(gè)地方 公式:原始位置(left top)+手指移動(dòng)的距離(x y的差值)
swipe手勢(shì):swipe的功能是為了判斷手勢(shì)的方向
觸屏輪播圖案例
Click延遲300ms
Click事件在移動(dòng)手機(jī)開發(fā)中有300ms的延遲，因?yàn)樵谑謾C(jī)早期，瀏覽器系統(tǒng)有放大和縮放功能，用戶在屏幕上點(diǎn)擊兩次之后，系統(tǒng)會(huì)觸發(fā)放大或者縮放功能，因此系統(tǒng)做了一個(gè)處理，當(dāng)觸摸一次后，在300ms這段時(shí)間內(nèi)有沒有觸摸第二次，如果觸摸了第二次的話，說(shuō)明是觸發(fā)放大或縮放功能，否則的話是click事件。因此當(dāng)click時(shí)候，所有用戶必須等待于300ms后才會(huì)觸發(fā)click事件。所以當(dāng)在移動(dòng)端使用click事件的時(shí)候，會(huì)感覺到有300ms的遲鈍。
其實(shí)Click延時(shí)不是精確的300ms 他是一個(gè)習(xí)慣性的名稱 而是因?yàn)橛脩敉ㄟ^(guò)正常的點(diǎn)擊 click事件大概在300ms的時(shí)候觸發(fā)(一般情況下 300ms延遲說(shuō)的是 大概在200-300ms左右)
解決
1.veiwport設(shè)置
2.fastClick插件
iScroll
iScroll是什么?
iScroll是一個(gè)高性能，資源占用少，無(wú)依賴，多平臺(tái)的javascript滾動(dòng)插件。
iScroll使用方法
zepto(重點(diǎn))
zepto.js
zepto是什么?
Zepto是一個(gè)輕量級(jí)的針對(duì)現(xiàn)代高級(jí)瀏覽器的JavaScript庫(kù)， 它與jquery有著類似的api。 如果你會(huì)用jquery，那么你也會(huì)用zepto。
1.zepto比jquery要小
2.jquery已經(jīng)有了大量的用戶 選擇了和jquery的方法和調(diào)用一樣的一個(gè)庫(kù) 就是zepto
3.zepto完整的壓縮完 40k 適應(yīng)于移動(dòng)端輕量級(jí)的特點(diǎn)
4.zepto是分模塊的默認(rèn)的只有5個(gè)核心模塊 其他的都是按需使用
zepto的模塊介紹
核心模塊 5個(gè)
總共有17個(gè)模塊
zetpo使用舉例
zepto定制
默認(rèn)的zepto只有默認(rèn)的5個(gè)模塊
如果想用其他的需要的模塊 那么需要定制
步驟:
1.安裝node
2.去github下載zepto-master.zip
3.把zepto-master.zip解壓 進(jìn)入有很多文件的文件夾中
4.安裝鍵盤shift 打開命令行窗口
5.輸入命令:npm install
6.定制
6.1 找到package.json同級(jí)文件中的make文件的41行
6.2 如果你需要什么模塊 就把名稱添加進(jìn)入
6.3 執(zhí)行npm run-scripts dist
6.4 如果有問題 查看zepto中的readme.md
swipe
swipe.js
下載地址:https://github.com/thebird/Swipe
中文文檔:無(wú)中文文檔 英文文檔為github地址
swipe是什么?
swipe是最精準(zhǔn)的觸摸輪播圖插件
swipe使用方法?
fastclick
中文文檔:無(wú)中文文檔 英文文檔為github地址
fastclick是什么?
移動(dòng)端事件會(huì)比鼠標(biāo)事件快大約300ms 還有一個(gè)bug 只不過(guò)這個(gè)bug不去修改
?
fastclick使用方法?
