如何解決網(wǎng)站制作中移動(dòng)端點(diǎn)透問(wèn)題

在移動(dòng)端開(kāi)發(fā)過(guò)程中，難免會(huì)出現(xiàn)點(diǎn)透問(wèn)題。哪些情況下會(huì)出現(xiàn)移動(dòng)端點(diǎn)透問(wèn)題？

1.A/B兩個(gè)層上下z軸重疊。

2.上層的A點(diǎn)擊后消失或移開(kāi)。（這一點(diǎn)很重要）

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

為甚么會(huì)出現(xiàn)點(diǎn)透問(wèn)題？

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

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

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

點(diǎn)透問(wèn)題解決方案：

方案一：

易網(wǎng)最推薦的是統(tǒng)一代碼風(fēng)格，在對(duì)點(diǎn)擊時(shí)效沒(méi)有高要求的情況，建議事件統(tǒng)一使用click事件,對(duì)于非游戲開(kāi)發(fā)的情況，click的時(shí)間延遲能夠給人更好的過(guò)度體驗(yàn)。

方案二：

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

方案三：

來(lái)得很直接github上有個(gè)fastclick可以完美解決

引入fastclick.js，因?yàn)閒astclick源碼不依賴其他庫(kù)所以你可以在原生的js前直接加上

window.addEventListener( "load", function() {

FastClick.attach( document.body );

}, false );

或者有zepto或者jqm的js里面加上

$(function() {

FastClick.attach(document.body);

});

當(dāng)然require的話就這樣：

var FastClick = require(‘fastclick‘);

FastClick.attach(document.body, options);