資訊專欄INFORMATION COLUMN
摘要：梳理一下事件的順序就是在中執(zhí)行回調(diào)點(diǎn)透的原理常見到有這種應(yīng)用場(chǎng)景，點(diǎn)擊遮罩層，遮罩層消失，露出底部的頁(yè)面。點(diǎn)透的解決方案統(tǒng)一使用事件，或者事件。
首先介紹tap事件：
tap事件的意義：在移動(dòng)端，click事件會(huì)有300ms延遲，因?yàn)闉g覽器通過(guò)判斷300ms內(nèi)是否會(huì)繼續(xù)點(diǎn)擊，來(lái)判斷是否縮放網(wǎng)頁(yè)。（即雙擊放大網(wǎng)頁(yè)的效果有一個(gè)300ms的時(shí)間來(lái)判斷，300ms過(guò)去了，才會(huì)觸發(fā)click事件）
tap事件的實(shí)現(xiàn)：使用瀏覽器默認(rèn)支持的touch事件來(lái)模擬，根據(jù)touchstart、touchmove、touchend這三個(gè)事件進(jìn)行模擬tap事件，達(dá)到封裝tap事件的效果。下面的代碼是我做的一個(gè)簡(jiǎn)易的封裝。
//定義tap函數(shù)，傳入需要綁定的元素，和一個(gè)回調(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){ //如果超過(guò)了最大時(shí)間，不觸發(fā)tap
console.log("超時(shí)了");
return ;
}
//如果移動(dòng)距離過(guò)大，則不是tap事件。為了大家在電腦上能看到效果，這里設(shè)置成了1000，因?yàn)樵陔娔X上移動(dòng)幅度不好控制。如果是在移動(dòng)端，設(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)透的原理：
常見到有這種應(yīng)用場(chǎng)景，點(diǎn)擊遮罩層，遮罩層消失，露出底部的頁(yè)面。當(dāng)?shù)撞康捻?yè)面中某個(gè)元素綁定了click事件，并且點(diǎn)擊遮罩的時(shí)候正好點(diǎn)的是該元素的位置，會(huì)發(fā)現(xiàn)該元素的click事件被觸發(fā)了。
click在PC端觸發(fā)順序是mousedown -> mousemove -> mouseup -> click這個(gè)順序來(lái)執(zhí)行的，在移動(dòng)端觸發(fā)順序是touchstart -> touchmove -> touchend -> click這個(gè)順序執(zhí)行。因?yàn)樵趖ouchend的時(shí)候我們的遮罩已經(jīng)消失了，所以相當(dāng)于點(diǎn)擊到了底部頁(yè)面中的元素。所以底部元素會(huì)觸發(fā)click事件。
tap點(diǎn)透的解決方案：
統(tǒng)一使用tap事件，或者click事件。
延遲遮罩層消失的時(shí)間，使其超過(guò)300ms
拿個(gè)透明遮罩擋?。ú煌扑]，太笨了，還麻煩）
使用fastclick庫(kù)
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/96344.html
摘要：早期版本的的就是如此處理的，自定義事件在中觸發(fā)，解決單擊延時(shí)的問(wèn)題。給按鈕綁定事件事件執(zhí)行自定義事件觸發(fā)上的事件當(dāng)然實(shí)際中肯定要放在其他的事件回調(diào)中，不然沒辦法響應(yīng)用戶操作。 click延時(shí) 在移動(dòng)設(shè)備上按下手指單擊，按先后順序，依次會(huì)發(fā)生touchstart->-touchmove（如果有的話）>touchend->mousedown->mousemove（如果有的話）->mouse...
摘要：?jiǎn)栴}封裝的事件由和實(shí)現(xiàn)，事件在端無(wú)效使用中事件在中該版本的點(diǎn)透問(wèn)題已經(jīng)解決可以放心使用，但是端仍然無(wú)效。一、問(wèn)題描述實(shí)際學(xué)習(xí)與工作中可能會(huì)有這樣的需求：在移動(dòng)web中給有重疊的兩個(gè)元素都添加了點(diǎn)擊事件，當(dāng)觸發(fā)上方的元素的時(shí)候同時(shí)也會(huì)透過(guò)該元素觸發(fā)下面的元素。這就是點(diǎn)透，然而這并不是我想要的效果。二、例子下面通過(guò)多種方式來(lái)模擬感受點(diǎn)透：<divclass="tap"&...
摘要：移動(dòng)端經(jīng)常出現(xiàn)點(diǎn)透，至于怎么出現(xiàn)的請(qǐng)大家去看一下實(shí)現(xiàn)的源碼。點(diǎn)透是什么你可能碰到過(guò)在列表頁(yè)面上創(chuàng)建一個(gè)彈出層，彈出層有個(gè)關(guān)閉的按鈕，你點(diǎn)了這個(gè)按鈕關(guān)閉彈出層后后，這個(gè)按鈕正下方的內(nèi)容也會(huì)執(zhí)行點(diǎn)擊事件或打開鏈接。這個(gè)被定義為這是一個(gè)點(diǎn)透現(xiàn)象。 移動(dòng)端經(jīng)常出現(xiàn)點(diǎn)透，至于怎么出現(xiàn)的請(qǐng)大家去看一下zepto實(shí)現(xiàn)tap的源碼。 1、點(diǎn)透是什么 你可能碰到過(guò)在列表頁(yè)面上創(chuàng)建一個(gè)彈出層，彈出層有個(gè)關(guān)...
摘要：移動(dòng)端經(jīng)常出現(xiàn)點(diǎn)透，至于怎么出現(xiàn)的請(qǐng)大家去看一下實(shí)現(xiàn)的源碼。點(diǎn)透是什么你可能碰到過(guò)在列表頁(yè)面上創(chuàng)建一個(gè)彈出層，彈出層有個(gè)關(guān)閉的按鈕，你點(diǎn)了這個(gè)按鈕關(guān)閉彈出層后后，這個(gè)按鈕正下方的內(nèi)容也會(huì)執(zhí)行點(diǎn)擊事件或打開鏈接。這個(gè)被定義為這是一個(gè)點(diǎn)透現(xiàn)象。 移動(dòng)端經(jīng)常出現(xiàn)點(diǎn)透，至于怎么出現(xiàn)的請(qǐng)大家去看一下zepto實(shí)現(xiàn)tap的源碼。 1、點(diǎn)透是什么 你可能碰到過(guò)在列表頁(yè)面上創(chuàng)建一個(gè)彈出層，彈出層有個(gè)關(guān)...
閱讀 1072·2023-04-26 02:02
閱讀 2413·2021-09-26 10:11
閱讀 3567·2019-08-30 13:10
閱讀 3756·2019-08-29 17:12
閱讀 729·2019-08-29 14:20
閱讀 2196·2019-08-28 18:19
閱讀 2245·2019-08-26 13:52
閱讀 968·2019-08-26 13:43
