移動(dòng)端的點(diǎn)擊事件
- 當(dāng)用戶在移動(dòng)端點(diǎn)擊一個(gè)按鈕時(shí)热某，移動(dòng)設(shè)備會(huì)延遲（約300ms）執(zhí)行，判斷用戶是否要進(jìn)行雙擊园细，所以在移動(dòng)端中不適用click實(shí)現(xiàn)單擊
- 使用移動(dòng)端的事件來(lái)進(jìn)行響應(yīng)惦积，以便提高用戶的體驗(yàn)（原則：移動(dòng)操作優(yōu)先）
- 移動(dòng)端實(shí)現(xiàn)單擊操作特點(diǎn)
- 單擊只有一根手指
- 判斷手指開(kāi)始觸摸和手指松開(kāi)的時(shí)間差異不能大于指定的值：300/150毫秒
- 保證沒(méi)有滑動(dòng)操作，如果有抖動(dòng)必須保證抖動(dòng)的距離在指定范圍內(nèi)
- 代碼的封裝
/*封裝移動(dòng)端的tap點(diǎn)擊事件*/
var itcast={
/*dom:傳入的dom元素讓我們可以為任意的元素添加tap事件*/
tap:function(dom,callback){
/*判斷是否傳入對(duì)象同時(shí)對(duì)象應(yīng)該是一個(gè)dom元素*/
if(!dom || typeof dom!="object"){
return;
}
var startTime,startX,startY;
dom.addEventListener("touchstart",function(e){
/*判斷是否只有一根手指進(jìn)行操作*/
if(e.targetTouches.length > 1){ //說(shuō)明不止一個(gè)手指
return;
}
/*記錄手指開(kāi)始觸摸的時(shí)間*/
startTime=Date.now();
/*記錄當(dāng)前手指的坐標(biāo)*/
startX= e.targetTouches[0].clientX;
startY= e.targetTouches[0].clientY;
/*來(lái)做一些與事件相關(guān)的初始化操作*/
})
/*touchend：當(dāng)手指松開(kāi)時(shí)候觸發(fā)猛频，意味著當(dāng)前元素上已經(jīng)沒(méi)有手指對(duì)象了,所以無(wú)法通過(guò)targetTouches來(lái)獲取手指對(duì)象*/
dom.addEventListener("touchend",function(e){
/*判斷是否只有一根手指進(jìn)行操作*/
if(e.changedTouches.length > 1){ //說(shuō)明不止一個(gè)手指
return;
}
if(Date.now()-startTime > 150){ //長(zhǎng)按操作
return;
}
/*判斷松開(kāi)手指時(shí)的坐標(biāo)與觸摸開(kāi)始時(shí)的坐標(biāo)的距離差異*/
var endX=e.changedTouches[0].clientX;
var endY=e.changedTouches[0].clientY;
/*這里暫且將距離差異定為6*/
if(Math.abs(endX-startX) < 6 && Math.abs(endY-startY) <6){
console.log("這就是移動(dòng)端的單擊事件--tap事件");
/*執(zhí)行tap事件響應(yīng)后的處理操作*/
/*判斷用戶是否傳入的回調(diào)函數(shù)*/
callback && callback(e);
}
})
}
};
注意：在移動(dòng)端使用touchstart或者top (zepto插件的使用也)會(huì)出現(xiàn)點(diǎn)透現(xiàn)象狮崩，指當(dāng) 點(diǎn)擊一個(gè)元素時(shí)蛛勉，該元素下面的元素也會(huì)被觸發(fā)點(diǎn)擊事件。
