首頁 > web前端 > H5教程 > 主體

對Tap事件和Tap點透原理的分析

不言
發布: 2018-07-28 10:48:51
原創
2123 人瀏覽過

這篇文章跟大家介紹的文章內容是關於對Tap事件和Tap點透原理的分析,有很好的參考價值,希望可以幫助到有需要的朋友。

首先介紹tap事件:

  1. tap事件的意義:在行動端,click事件會有300ms延遲,因為瀏覽器透過判斷300ms內是否會繼續點擊,來判斷是否縮放網頁。 (即雙擊放大網頁的效果有一個300ms的時間來判斷,300ms過去了,才會觸發click事件)

  2. 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點透的原理:

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

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

tap點透的解:

  1. #統一使用tap事件,或是click事件。

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

  3. 拿個透明遮罩擋住(不推薦,太笨了,還麻煩)

  4. 使用fastclick庫

#相關推薦:

HTML5新增屬性:五個全域屬性的介紹

canvas原生實作前端網頁行動裝置簽章
#

以上是對Tap事件和Tap點透原理的分析的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!