在移動端開發(fā)過程中，難免會出現(xiàn)點透問題。

那么什么是點透？

如下圖所示：

在B元素上有半透明紅色遮蓋層A，黃色B元素內(nèi)有可點擊鏈接C。在“移動端”，點擊事件通常采用touch相關(guān)事件來獲取高效率。在點擊遮蓋層A的時候，touch事件觸發(fā)使得A遮蓋層隱藏，而黃色B元素內(nèi)有可點擊鏈接C在遮蓋層隱藏之后被點擊，觸發(fā)click跳轉(zhuǎn)到c鏈接對應(yīng)的頁面，這就是移動端點透問題發(fā)生的一種典型情況。往往這種結(jié)果都不是我們想要的。

哪些情況下會出現(xiàn)移動端點透問題？

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

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

3.B元素本身有默認click事件（如a標簽） 或 B綁定了click事件。

為甚么會出現(xiàn)點透問題？

在這里就跟網(wǎng)聯(lián)科技小編一起捋一捋移動端點擊事件的先后順序問題吧！

事件的觸發(fā)時間按由早到晚排列為：touchstart 早于 touchend 早于 click。

當手指觸摸到屏幕的時候，系統(tǒng)生成兩個事件，一個是touch 一個是click，touch先執(zhí)行，touch執(zhí)行完成后，A遮蓋層從文檔樹上面消失了，而且由于移動端click還有延遲200-300ms的關(guān)系，當系統(tǒng)要觸發(fā)click的時候，發(fā)現(xiàn)在用戶點擊的位置上面，目前離用戶最近的黃色元素B，所以就直接把click事件作用在B元素上面了.

點透問題解決方案：

方案一：

網(wǎng)聯(lián)科技小編小個人最推薦的是統(tǒng)一代碼風(fēng)格，在對點擊時效沒有高要求的情況，建議事件統(tǒng)一使用click事件,對于非游戲開發(fā)的情況，click的時間延遲能夠給人更好的過度體驗。

方案二：

對時效性要求高的情況下，如果b元素并沒有默認的click事件的情況（沒有a鏈接），統(tǒng)一使用touch事件，更有利于用戶反應(yīng)速度上的體驗。

方案三：

來得很直接github上有個fastclick可以完美解決
引入fastclick.js，因為fastclick源碼不依賴其他庫所以你可以在原生的js前直接加上
window.addEventListener( "load", function() {
FastClick.attach( document.body );
}, false );
或者有zepto或者jqm的js里面加上
$(function() {
FastClick.attach(document.body);
});
當然require的話就這樣：
var FastClick = require(‘fastclick‘);
FastClick.attach(document.body, options);

了解更多網(wǎng)站建設(shè)知識