Tap事件和Tap點透原理

IamDLY 發布于2019-08-23 10:26 / 2915人閱讀

摘要：梳理一下事件的順序就是在中執行回調點透的原理常見到有這種應用場景，點擊遮罩層，遮罩層消失，露出底部的頁面。點透的解決方案統一使用事件，或者事件。

首先介紹tap事件：

tap事件的意義：在移動端，click事件會有300ms延遲，因為瀏覽器通過判斷300ms內是否會繼續點擊，來判斷是否縮放網頁。（即雙擊放大網頁的效果有一個300ms的時間來判斷，300ms過去了，才會觸發click事件）

tap事件的實現：使用瀏覽器默認支持的touch事件來模擬，根據touchstart、touchmove、touchend這三個事件進行模擬tap事件，達到封裝tap事件的效果。下面的代碼是我做的一個簡易的封裝。

//定義tap函數，傳入需要綁定的元素，和一個回調函數
function tap(el,callBack){
    var startTime = 0;
    var maxTime = 250;
    var [startX,startY,endX,endY] = [0,0,0,0]; //es6解構賦值
    el.addEventListener("touchstart",function(e){                            
        console.log("touchstart");
        startTime = Date.now(); //開始觸摸的事件  
        startX = e.touches[0].clientX; //手指在瀏覽器橫坐標
        startY = e.touches[0].clientY; //手指在瀏覽器縱坐標
    })
    el.addEventListener("touchmove",function(e){
        console.log("touchmove");
        endX = e.touches[0].clientX; //手指在瀏覽器橫坐標
        endY = e.touches[0].clientY; //手指在瀏覽器縱坐標
    })
    el.addEventListener("touchend",function(e){
        console.log("touchend");
        if( (Date.now()-startTime) > maxTime){ //如果超過了最大時間，不觸發tap
               console.log("超時了");
            return ; 
        }
        //如果移動距離過大，則不是tap事件。為了大家在電腦上能看到效果，這里設置成了1000，因為在電腦上移動幅度不好控制。如果是在移動端，設置為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中執行回調

tap點透的原理：

常見到有這種應用場景，點擊遮罩層，遮罩層消失，露出底部的頁面。當底部的頁面中某個元素綁定了click事件，并且點擊遮罩的時候正好點的是該元素的位置，會發現該元素的click事件被觸發了。

click在PC端觸發順序是mousedown -> mousemove -> mouseup -> click這個順序來執行的，在移動端觸發順序是touchstart -> touchmove -> touchend -> click這個順序執行。因為在touchend的時候我們的遮罩已經消失了，所以相當于點擊到了底部頁面中的元素。所以底部元素會觸發click事件。

tap點透的解決方案：

統一使用tap事件，或者click事件。

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

拿個透明遮罩擋住（不推薦，太笨了，還麻煩）

使用fastclick庫

GPU云服務器云服務器 tap python tap qos tap linux中tap

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96344.html

“click延時”是怎么來的與自定義tap事件解決“點透”

摘要：早期版本的的就是如此處理的，自定義事件在中觸發，解決單擊延時的問題。給按鈕綁定事件事件執行自定義事件觸發上的事件當然實際中肯定要放在其他的事件回調中，不然沒辦法響應用戶操作。 click延時在移動設備上按下手指單擊，按先后順序，依次會發生touchstart->-touchmove（如果有的話）>touchend->mousedown->mousemove（如果有的話）->mouse...

kid143 2019-08-20 14:48 評論0 收藏0
點透問題及解決

摘要：問題封裝的事件由和實現，事件在端無效使用中事件在中該版本的點透問題已經解決可以放心使用，但是端仍然無效。一、問題描述實際學習與工作中可能會有這樣的需求：在移動web中給有重疊的兩個元素都添加了點擊事件，當觸發上方的元素的時候同時也會透過該元素觸發下面的元素。這就是點透，然而這并不是我想要的效果。二、例子下面通過多種方式來模擬感受點透：<divclass="tap"&...

番茄西紅柿 2019-04-23 11:57 評論0 收藏0
移動端-點透問題巧妙解決

摘要：移動端經常出現點透，至于怎么出現的請大家去看一下實現的源碼。點透是什么你可能碰到過在列表頁面上創建一個彈出層，彈出層有個關閉的按鈕，你點了這個按鈕關閉彈出層后后，這個按鈕正下方的內容也會執行點擊事件或打開鏈接。這個被定義為這是一個點透現象。移動端經常出現點透，至于怎么出現的請大家去看一下zepto實現tap的源碼。 1、點透是什么你可能碰到過在列表頁面上創建一個彈出層，彈出層有個關...

MockingBird 2019-08-22 15:33 評論0 收藏0
移動端-點透的解決方法

摘要：移動端經常出現點透，至于怎么出現的請大家去看一下實現的源碼。點透是什么你可能碰到過在列表頁面上創建一個彈出層，彈出層有個關閉的按鈕，你點了這個按鈕關閉彈出層后后，這個按鈕正下方的內容也會執行點擊事件或打開鏈接。這個被定義為這是一個點透現象。移動端經常出現點透，至于怎么出現的請大家去看一下zepto實現tap的源碼。 1、點透是什么你可能碰到過在列表頁面上創建一個彈出層，彈出層有個關...

cpupro 2019-08-22 15:31 評論0 收藏0