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