tap和click事件區別

首先說下題目：clike事件和 Zepto.js 中tap的區別

　　首先介紹下Zepto：

　　最初是作為移動端開發的庫，但是卻可以作為JQuery輕量級的替代品，因為API和JQuery相似，而文件更小。

　　介紹下tap和click的區別：

　　兩者都會在點擊時觸發，但是在web手機端，clikc會有200-300ms的延時，所以要用tap代替click作為點擊事件，singleTap和doubleTap分別作為單次點擊和雙擊，但是使用tap會帶來點透事件（事件穿透）。

　　介紹下什么是tap事件穿透：

　　執行完上層綁定的tap事件后，下層如果綁定這click事件或者本身就存在點擊事件（a/input）也會默認觸發，這就是tap點透事件

　　下面正規解釋下tap點透事件發生的場景：

　　當A/B兩個層上下Z軸疊層，上層的A點擊后消失或者移開（原因接下來會講），當B元素本身默認有click事件或者綁定click事件，這種情況下，點擊A/B重疊的部分，就會出現點透事件

　　點透現象出現的原因：

　　首先要知道tap事件是通過監聽綁定document上的touch事件來模擬的，并且tap事件是冒泡到document上才觸發的；

　　touchstart：在這個dom上用手觸摸就能開始

　　click：在這個dom上用手觸摸，且手指未曾移動，且在這個dom上手指離開屏幕，且觸摸和離開時間很短（有的瀏覽器可能不檢測時間間隔，照樣可以觸發click），才開始觸發。

　　也就是說在移動端的事件觸發從早到晚排序：touchstart touchstop click 。 所以click的觸發是有延時的，about 300ms

　　由于我們在touchstart階段就已經隱藏了A，當click被觸發時，能夠被點擊的就是B；

　　介紹下click事件的觸發規則：

　　觸發當前有click的元素，且該元素面朝用戶的最前端，才會觸發click。

　　上面B中，由于B綁定了click或者B本身存在click，所以B也被觸發了，（因為在touchstart階段就已經隱藏了A），于是就產生了點透事件

　　介紹下解決方法：

　　1.github上有一個叫做fastclick的庫https://github.com/ftlabs/fastclick

　?。?a href="http://www.qd573.com/v/tag/852/" target="_blank">javascript］ view plain

　　$（function（）{

　　newFastClick（document.body）;

　　}）

　　然后給需要的元素綁定click事件，這樣就不會延時啦，據說還會比tap更快

　　2.為元素綁定touchend事件，并在內部加上e.preventDefault（）;

　?。踛avascript］ view plain

　　$A.on（‘touchend’，function（e）{//而touchend是原生的事件，在dom本身上就會被捕獲觸發

　　$demo.hide（）

　　e.preventDefault（）;

　　}）

　　監聽touchend事件，阻止A元素的touchend的默認行為，從而阻止click事件的產生