建站
咨詢
售后
建站咨詢
新聞中心
先說說故事發(fā)生的場景，舉個栗子如下圖：
成都創(chuàng)新互聯(lián)公司長期為1000+客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為范縣企業(yè)提供專業(yè)的成都網(wǎng)站制作、成都做網(wǎng)站，范縣網(wǎng)站改版等技術(shù)服務(wù)。擁有10年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。
A是遮罩層，B是正常的DOM，C是B上的某個元素，這里是鏈接。場景是點(diǎn)擊A的時候A消失，結(jié)果點(diǎn)到了C，頁面發(fā)生了跳轉(zhuǎn)，這顯然不是咱想要的~
下面我們來監(jiān)測點(diǎn)擊事件：
- var div1 = document.getElementById("div1");
- var div2 = document.getElementById('div2');
- var con = document.getElementById('console');
- function handle(e){
- var tar = e.target, eve = e.type;
- var ele = document.createElement("p");
- ele.innerHTML = "target:"+ tar.id + " event:" + eve ;
- con.appendChild(ele);
- if(tar.id === "div1"){
- div1.style.display = "none";
- }
- }
- div1.addEventListener("touchend",handle);
- div1.addEventListener("touchstart",handle);
只要你不點(diǎn)擊C處，一切都很平靜，貌似沒有問題，事件順序是這樣的：
- target:div1 event:touchstart
- target:div2 event:touchend
但是如果你在C處點(diǎn)擊A，你會發(fā)現(xiàn)頁面跳轉(zhuǎn)了，為了更清楚的看到這個過程，我們?yōu)锽綁定click事件，即如果B觸發(fā)了click事件，那么說明，在A上的點(diǎn)擊最終點(diǎn)到了B上。在上面javascript清單上添加一行代碼如下：
- div2.addEventListener('click',handle);
點(diǎn)擊B區(qū)域，可以看到頁面下方的log記錄控制臺內(nèi)出現(xiàn)如下內(nèi)容：
- target:div1 event:touchstarttarget:div1 event:touchendtarget:div2 event:click
可見，在div1的事件觸發(fā)完畢后，div2也就是B區(qū)域神奇的捕獲到了click事件，而事實(shí)上我們只點(diǎn)擊了div1。這就是”點(diǎn)透“了，隔山打牛！
點(diǎn)透現(xiàn)象出現(xiàn)的場景：
剛才舉例說明了什么是點(diǎn)透，其實(shí)點(diǎn)透的出現(xiàn)場景可以總結(jié)如下：
-
A/B兩個層上下z軸重疊。
-
上層的A點(diǎn)擊后消失或移開。（這一點(diǎn)很重要）
-
B元素本身有默認(rèn)click事件（如a標(biāo)簽） 或 B綁定了click事件。
在以上情況下，點(diǎn)擊A/B重疊的部分，就會出現(xiàn)點(diǎn)透的現(xiàn)象。
為什么會出現(xiàn)”點(diǎn)透“現(xiàn)象
在移動端不使用click而用touch事件代替觸摸是因?yàn)閏lick事件有著明顯的延遲，具體touchstart與click的區(qū)別如下：
-
touchstart：在這個DOM（或冒泡到這個DOM）上手指觸摸開始即能立即觸發(fā)
-
click：在這個DOM（或冒泡到這個DOM）上手指觸摸開始，且手指未曾在屏幕上移動（某些瀏覽器允許移動一個非常小的位移值），且在這個在這個dom上手指離開屏幕，且觸摸和離開屏 幕之間的間隔時間較短（某些瀏覽器不檢測間隔時間，也會觸發(fā)click）才能觸發(fā)
也就是說，事件的觸發(fā)時間按由早到晚排列為：touchstart 早于 touchend 早于 click。亦即click的觸發(fā)是有延遲的，這個時間大概在300ms左右。
由于我們在touchstart階段就已經(jīng)隱藏了罩層A，當(dāng)click被觸發(fā)時候，能夠被點(diǎn)擊的元素則是其下的B元素，由于B綁定了click事件（或者B本身默認(rèn)存在click事件），所以B的click事件被觸發(fā)，產(chǎn)生了點(diǎn)透的情況。
解決方案
對于B元素本身沒有默認(rèn)click事件的情況（無a標(biāo)簽等），應(yīng)統(tǒng)一使用touch事件，統(tǒng)一代碼風(fēng)格，并且由于click事件在移動端的延遲要大很多，不利于用戶體驗(yàn)，所以關(guān)于觸摸事件應(yīng)盡量使用touch相關(guān)事件。
對于B元素本身存在默認(rèn)click事件的情況,應(yīng)及時取消A元素的默認(rèn)點(diǎn)擊事件，從而阻止click事件的產(chǎn)生。即應(yīng)在上例的handle函數(shù)中添加代碼如下：
- e.preventDefault();
文章名稱：關(guān)于移動web開發(fā)過程中的”點(diǎn)透“問題
文章出自：http://m.5511xx.com/article/dphgjpo.html
