在移動(dòng)端，網(wǎng)頁上的點(diǎn)擊穿透問題導(dǎo)致了非常糟糕的用戶體驗(yàn)。那么該如何解決這個(gè)問題呢？
問題產(chǎn)生的原因
移動(dòng)端瀏覽器的點(diǎn)擊事件存在300ms的延遲執(zhí)行，這個(gè)延遲是由于移動(dòng)端需要通過在這個(gè)時(shí)間段用戶是否兩次觸摸屏幕而觸發(fā)放大屏幕的功能。那么由于click事件將延遲300ms的存在，開發(fā)者在頁面上做一些交互的時(shí)候往往會(huì)導(dǎo)致點(diǎn)擊穿透問題(可以能是層之間的，也可以是頁面之間的)。
解決問題
之前遇到這個(gè)問題的時(shí)候，有在網(wǎng)上看了一些關(guān)于解決移動(dòng)端點(diǎn)擊穿透的問題，也跟著網(wǎng)上提出的方式進(jìn)行了各項(xiàng)測(cè)試，最終還是覺得使用fastclick插件比較靠譜些，其他幾種方法多多少少會(huì)存在一些其他問題(當(dāng)然，fastclick也不是說完全兼容各項(xiàng)，但相對(duì)于其他一些方法不會(huì)造成較明顯的問題)
使用方式:
<!-- 引入文件 --><script src="fastclick.js"></script>
js:
// fastclick 使用/*
@params layer 需要處理click事件的視圖
@params options 一些配置
{
touchBoundary: 10 // 點(diǎn)擊事件邊界線
tapDelay: 200 // tap最小延時(shí)
tapTimeout: 700 // tap最大延時(shí)
}*/FastClick.attach(layer,options)// 一般使用FastClick.attach(document.body)