點(diǎn)擊事件延遲問(wèn)題所在:
在移動(dòng)端中,由于兩次觸摸是放大操作,,所以當(dāng)你點(diǎn)擊一次的時(shí)候,瀏覽器會(huì)等待300ms,看用戶(hù)是否會(huì)進(jìn)行第二次點(diǎn)擊,如果沒(méi)有的話(huà),才會(huì)執(zhí)行點(diǎn)擊事件
為什么要解決:
隨著h5游戲,移動(dòng)端網(wǎng)頁(yè)的流行,用戶(hù)對(duì)web網(wǎng)頁(yè)的性能也隨著提高,點(diǎn)擊事件的延遲會(huì)影響用戶(hù)體驗(yàn),尤其是在游戲中,這是個(gè)大忌.
這是因?yàn)檫@個(gè)問(wèn)題的存在,所以出現(xiàn)了tap事件,tap事件對(duì)應(yīng)的是在移動(dòng)端中的.
tap事件的原理:
tap事件的原理其實(shí)是源于觸摸touch事件,在移動(dòng)觸摸事件就是在同個(gè)點(diǎn)觸發(fā),及touchmove的距離距離touchstar的距離為0,并且點(diǎn)擊的時(shí)間不超過(guò)某個(gè)設(shè)定的時(shí)間值,超過(guò)該時(shí)間值的話(huà),就屬于長(zhǎng)按了
下面我封裝了一個(gè)事件,模擬tap事件的原理:
//封裝tap的方法functiontap(ele,callBack){//觸摸開(kāi)始的時(shí)間varstartTime=0;//定義touchmove是否觸發(fā)varismove=false;varmaxTime=250; ele.addEventListener('touchstart',function(e){ startTime=Date.now(); ismove=false; }) ele.addEventListener('touchmove',function(e){//觸發(fā)就賦值為trueismove=true; }) ele.addEventListener('touchend',function(e){//判斷是否是touchmove是否觸發(fā)if(ismove) {return; }//判斷是否為長(zhǎng)按if((Date.now()-startTime)>maxTime) {return; }//如果能夠到這里callBack(e); }) }
