移動(dòng)端WEB開(kāi)發(fā)中click,touch,tap事件怎么使用

這篇文章主要介紹移動(dòng)端WEB開(kāi)發(fā)中click,touch,tap事件怎么使用，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)公司是一家集成都網(wǎng)站建設(shè)、成都網(wǎng)站制作、網(wǎng)站頁(yè)面設(shè)計(jì)、網(wǎng)站優(yōu)化SEO優(yōu)化為一體的專業(yè)網(wǎng)站設(shè)計(jì)公司，已為成都等多地近百家企業(yè)提供網(wǎng)站建設(shè)服務(wù)。追求良好的瀏覽體驗(yàn),以探求精品塑造與理念升華,設(shè)計(jì)最適合用戶的網(wǎng)站頁(yè)面。 合作只是第一步，服務(wù)才是根本,我們始終堅(jiān)持講誠(chéng)信，負(fù)責(zé)任的原則，為您進(jìn)行細(xì)心、貼心、認(rèn)真的服務(wù),與眾多客戶在蓬勃發(fā)展的市場(chǎng)環(huán)境中,互促共生。

一、click 和 tap 比較

兩者都會(huì)在點(diǎn)擊時(shí)觸發(fā)，但是在手機(jī)WEB端，click會(huì)有 200~300 ms，所以請(qǐng)用tap代替click作為點(diǎn)擊事件。

singleTap和doubleTap 分別代表單次點(diǎn)擊和雙次點(diǎn)擊。

二、關(guān)于tap的點(diǎn)透處理

在使用zepto框架的tap來(lái)移動(dòng)設(shè)備瀏覽器內(nèi)的點(diǎn)擊事件，來(lái)規(guī)避click事件的延遲響應(yīng)時(shí)，有可能出現(xiàn)點(diǎn)透的情況，即點(diǎn)擊會(huì)觸發(fā)非當(dāng)前層的點(diǎn)擊事件。

處理方式：

（1）、

github上有一個(gè)叫做fastclick的庫(kù)，它也能規(guī)避移動(dòng)設(shè)備上click事件的延遲響應(yīng)，https://github.com/ftlabs/fastclick
將它用script標(biāo)簽引入頁(yè)面（該庫(kù)支持AMD，于是你也可以按照AMD規(guī)范，用諸如require.js的模塊加載器引入），并且在dom ready時(shí)初始化在body上，如：

$(function(){
    newFastClick(document.body);
})

然后給需要“無(wú)延遲點(diǎn)擊”的元素綁定click事件（注意不再是綁定zepto的tap事件）即可。
當(dāng)然，你也可以不在body上初始化它，而在某個(gè)dom上初始化，這樣，只有這個(gè)dom和它的子元素才能享受“無(wú)延遲”的點(diǎn)擊

實(shí)踐開(kāi)發(fā)中發(fā)現(xiàn)，當(dāng)元素綁定fastclick后，click響應(yīng)速度比tap還要快一點(diǎn)點(diǎn)。哈哈

（2）、為元素綁定touchend事件，并在內(nèi)部加上e.preventDefault();

$demo.on('touchend',function(e){//改變了事件名稱，tap是在body上才被觸發(fā)，而touchend是原生的事件，在dom本身上就會(huì)被捕獲觸發(fā)
    $demo.hide()
    e.preventDefault();//阻止“默認(rèn)行為”
})

三、touch事件touch是針對(duì)觸屏手機(jī)上的觸摸事件。現(xiàn)今大多數(shù)觸屏手機(jī)webkit內(nèi)核提供了touch事件的監(jiān)聽(tīng)，讓開(kāi)發(fā)者可以獲取用戶觸摸屏幕時(shí)的一些信息。

其中包括：touchstart,touchmove,touchend,touchcancel 這四個(gè)事件

touchstart,touchmove,touchend事件可以類比于mousedown，mouseover
，mouseup的觸發(fā)。

touchstart ： 當(dāng)手指觸摸到屏幕會(huì)觸發(fā)；

touchmove : 當(dāng)手指在屏幕上移動(dòng)時(shí)，會(huì)觸發(fā)；

touchend : 當(dāng)手指離開(kāi)屏幕時(shí)，會(huì)觸發(fā)；

而touchcancel許多人不知道它在什么時(shí)候會(huì)被觸發(fā)而忽略它，其實(shí)當(dāng)你的手指還沒(méi)有離開(kāi)屏幕時(shí)，有系統(tǒng)級(jí)的操作發(fā)生時(shí)就會(huì)觸發(fā)touchcancel，例如alert和confirm彈框，又或者是android系統(tǒng)的功能彈窗。

這4個(gè)事件的觸發(fā)順序?yàn)椋?/p>

touchstart -> touchmove
-> …… -> touchmove ->touchend

但是單憑監(jiān)聽(tīng)上面的單個(gè)事件，不足以滿足我們?nèi)ネ瓿杀O(jiān)聽(tīng)在觸屏手機(jī)常見(jiàn)的一些手勢(shì)操作，如雙擊、長(zhǎng)按、左右滑動(dòng)、縮放等手勢(shì)操作。需要組合監(jiān)聽(tīng)這些事件去封裝對(duì)這類手勢(shì)動(dòng)作。

其實(shí)市面上很多框架都針對(duì)手機(jī)瀏覽器封裝了這些手勢(shì)，例如jqmobile、zepto、jqtouch，不過(guò)悲劇發(fā)生了，對(duì)于某些android系統(tǒng)（我自己測(cè)試到的在android 4.0.x），touchmove和touchend事件不能被很好的觸發(fā)，舉例子說(shuō)明下：

比如手指在屏幕由上向下拖動(dòng)頁(yè)面時(shí)，理論上是會(huì)觸發(fā) 一個(gè) touchstart ，很多次 touchmove
，和最終的 touchend ，可是在android 4.0上，touchmove只被觸發(fā)一次，觸發(fā)時(shí)間和touchstart
差不多，而touchend直接沒(méi)有被觸發(fā)。這是一個(gè)非常嚴(yán)重的bug，在google Issue已有不少人提出  http://code.google.com/p/android/issues/detail?id=19827

暫時(shí)我只發(fā)現(xiàn)在android 4.0會(huì)有這個(gè)bug，據(jù)說(shuō) ios 3.x的版本也會(huì)有。

而顯然jqmobile、zepto等都沒(méi)有意識(shí)到這個(gè)bug對(duì)監(jiān)聽(tīng)實(shí)現(xiàn)帶來(lái)的嚴(yán)重影響，所以在直接使用這些框架的event時(shí)，或多或少會(huì)出現(xiàn)兼容性問(wèn)題！

以上是“移動(dòng)端WEB開(kāi)發(fā)中click,touch,tap事件怎么使用”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前標(biāo)題：移動(dòng)端WEB開(kāi)發(fā)中click,touch,tap事件怎么使用
本文鏈接：http://m.jiaotiyi.com/article/gheeso.html