今天就跟大家聊聊有關(guān)什么是Tap事件和Tap點(diǎn)透原理，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

創(chuàng)新互聯(lián)是一家成都網(wǎng)站建設(shè)、網(wǎng)站制作，提供網(wǎng)頁設(shè)計，網(wǎng)站設(shè)計，網(wǎng)站制作，建網(wǎng)站，按需開發(fā)，網(wǎng)站開發(fā)公司，公司2013年成立是互聯(lián)行業(yè)建設(shè)者，服務(wù)者。以提升客戶品牌價值為核心業(yè)務(wù)，全程參與項(xiàng)目的網(wǎng)站策劃設(shè)計制作，前端開發(fā)，后臺程序制作以及后期項(xiàng)目運(yùn)營并提出專業(yè)建議和思路。

首先介紹tap事件：

1. tap事件的意義：在移動端，click事件會有300ms延遲，因?yàn)闉g覽器通過判斷300ms內(nèi)是否會繼續(xù)點(diǎn)擊，來判斷是否縮放網(wǎng)頁。（即雙擊放大網(wǎng)頁的效果有一個300ms的時間來判斷，300ms過去了，才會觸發(fā)click事件）

2. tap事件的實(shí)現(xiàn)：使用瀏覽器默認(rèn)支持的touch事件來模擬，根據(jù)touchstart、touchmove、touchend這三個事件進(jìn)行模擬tap事件，達(dá)到封裝tap事件的效果。下面的代碼是我做的一個簡易的封裝。

//定義tap函數(shù)，傳入需要綁定的元素，和一個回調(diào)函數(shù)
function tap(el,callBack){
    var startTime = 0;
    var maxTime = 250;
    var [startX,startY,endX,endY] = [0,0,0,0]; //es6解構(gòu)賦值
    el.addEventListener('touchstart',function(e){                            
        console.log('touchstart');
        startTime = Date.now(); //開始觸摸的事件  
        startX = e.touches[0].clientX; //手指在瀏覽器橫坐標(biāo)
        startY = e.touches[0].clientY; //手指在瀏覽器縱坐標(biāo)
    })
    el.addEventListener('touchmove',function(e){
        console.log('touchmove');
        endX = e.touches[0].clientX; //手指在瀏覽器橫坐標(biāo)
        endY = e.touches[0].clientY; //手指在瀏覽器縱坐標(biāo)
    })
    el.addEventListener('touchend',function(e){
        console.log('touchend');
        if( (Date.now()-startTime) > maxTime){ //如果超過了大時間，不觸發(fā)tap
               console.log('超時了');
            return ; 
        }
        //如果移動距離過大，則不是tap事件。為了大家在電腦上能看到效果，這里設(shè)置成了1000，因?yàn)樵陔娔X上移動幅度不好控制。如果是在移動端，設(shè)置為30就差不多了。
        if(Math.abs(endX-startX) > 1000 || Math.abs(endY-startY) > 1000){
             return;
        }
        callBack(e);
     })
}
tap(document.documentElement,function(e){
    console.log(e);
});

梳理一下：tap事件的順序就是 touchstart -> touchmove -> touchend -> 在touchend中執(zhí)行回調(diào)

tap點(diǎn)透的原理：

1. 常見到有這種應(yīng)用場景，點(diǎn)擊遮罩層，遮罩層消失，露出底部的頁面。當(dāng)?shù)撞康捻撁嬷心硞€元素綁定了click事件，并且點(diǎn)擊遮罩的時候正好點(diǎn)的是該元素的位置，會發(fā)現(xiàn)該元素的click事件被觸發(fā)了。

2. click在PC端觸發(fā)順序是mousedown -> mousemove -> mouseup -> click這個順序來執(zhí)行的，在移動端觸發(fā)順序是touchstart -> touchmove -> touchend -> click這個順序執(zhí)行。因?yàn)樵趖ouchend的時候我們的遮罩已經(jīng)消失了，所以相當(dāng)于點(diǎn)擊到了底部頁面中的元素。所以底部元素會觸發(fā)click事件。

tap點(diǎn)透的解決方案：

1. 統(tǒng)一使用tap事件，或者click事件。

2. 延遲遮罩層消失的時間，使其超過300ms

3. 拿個透明遮罩擋?。ú煌扑]，太笨了，還麻煩）

4. 使用fastclick庫

看完上述內(nèi)容，你們對什么是Tap事件和Tap點(diǎn)透原理有進(jìn)一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道，感謝大家的支持。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

本文題目：什么是Tap事件和Tap點(diǎn)透原理-創(chuàng)新互聯(lián)
網(wǎng)站URL：http://jinyejixie.com/article2/djcgic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、網(wǎng)頁設(shè)計公司、網(wǎng)站排名、搜索引擎優(yōu)化、品牌網(wǎng)站設(shè)計、定制開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)