本篇文章為大家展示了如何理解移動web開發(fā)過程中的點透問題，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

成都創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),興寧企業(yè)網(wǎng)站建設(shè),興寧品牌網(wǎng)站建設(shè),網(wǎng)站定制,興寧網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,興寧網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

先說說故事發(fā)生的場景，舉個栗子如下圖：

A是遮罩層，B是正常的DOM，C是B上的某個元素，這里是鏈接。場景是點擊A的時候A消失，結(jié)果點到了C，頁面發(fā)生了跳轉(zhuǎn)，這顯然不是咱想要的~

下面我們來監(jiā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);

只要你不點擊C處，一切都很平靜，貌似沒有問題，事件順序是這樣的：

target:div1 event:touchstart target:div2 event:touchend

但是如果你在C處點擊A，你會發(fā)現(xiàn)頁面跳轉(zhuǎn)了，為了更清楚的看到這個過程，我們?yōu)锽綁定click事件，即如果B觸發(fā)了click事件，那么說明，在A上的點擊最終點到了B上。在上面javascript清單上添加一行代碼如下：

div2.addEventListener('click',handle);

點擊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事件，而事實上我們只點擊了div1。這就是”點透“了，隔山打牛！

點透現(xiàn)象出現(xiàn)的場景：

剛才舉例說明了什么是點透，其實點透的出現(xiàn)場景可以總結(jié)如下：

1. A/B兩個層上下z軸重疊。

2. 上層的A點擊后消失或移開。（這一點很重要）

3. B元素本身有默認(rèn)click事件（如a標(biāo)簽） 或 B綁定了click事件。

在以上情況下，點擊A/B重疊的部分，就會出現(xiàn)點透的現(xiàn)象。

為什么會出現(xiàn)”點透“現(xiàn)象

在移動端不使用click而用touch事件代替觸摸是因為click事件有著明顯的延遲，具體touchstart與click的區(qū)別如下：

1. touchstart：在這個DOM（或冒泡到這個DOM）上手指觸摸開始即能立即觸發(fā)

2. click：在這個DOM（或冒泡到這個DOM）上手指觸摸開始，且手指未曾在屏幕上移動（某些<a  href=”http://www.it165.net/edu/ewl/” target=”_blank”  class=”keylink”>瀏覽器</a>允許移動一個非常小的位移值），且在這個在這個dom上手指離開屏幕，且觸摸和離開屏 幕之間的間隔時間較短（某些瀏覽器不檢測間隔時間，也會觸發(fā)click）才能觸發(fā)

也就是說，事件的觸發(fā)時間按由早到晚排列為：touchstart 早于 touchend 早于 click。亦即click的觸發(fā)是有延遲的，這個時間大概在300ms左右。

由于我們在touchstart階段就已經(jīng)隱藏了罩層A，當(dāng)click被觸發(fā)時候，能夠被點擊的元素則是其下的B元素，由于B綁定了click事件（或者B本身默認(rèn)存在click事件），所以B的click事件被觸發(fā)，產(chǎn)生了點透的情況。

解決方案

對于B元素本身沒有默認(rèn)click事件的情況（無a標(biāo)簽等），應(yīng)統(tǒng)一使用touch事件，統(tǒng)一代碼風(fēng)格，并且由于click事件在移動端的延遲要大很多，不利于用戶體驗，所以關(guān)于觸摸事件應(yīng)盡量使用touch相關(guān)事件。

對于B元素本身存在默認(rèn)click事件的情況,應(yīng)及時取消A元素的默認(rèn)點擊事件，從而阻止click事件的產(chǎn)生。即應(yīng)在上例的handle函數(shù)中添加代碼如下：

e.preventDefault();

上述內(nèi)容就是如何理解移動web開發(fā)過程中的點透問題，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享題目：如何理解移動web開發(fā)過程中的點透問題
URL網(wǎng)址：http://aaarwkj.com/article20/gjihjo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、網(wǎng)站收錄、微信公眾號、移動網(wǎng)站建設(shè)、App設(shè)計、虛擬主機(jī)

廣告

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