移動端點透問題及其解決方案


1.點透場景

層A覆蓋在層B上面,常見的有對話框等,層A用touchstart或者tap(zepto)事件點擊進行隱藏或者移開,由於click晚於touchstart,超過300ms,當層A隱藏后,click到的是下面的層B,此時層B的click事件會觸發,或者其上的a鏈接會跳轉,input,select會調起鍵盤。

zepto的tap事件原理
zepto的tap事件是通過touchstart,touchend(android 4.0.x不支持touchend,通過touchmove 設置定時器觸發touched)模擬出來的,
事件是綁定在document上,大體思路是在touchstart的時候向對象附加點擊的x,y;(其中還包含很多細節,比如設置最后點擊時間,設置長按定時器等);
touchmove的過程動態的計算手勢在view上的偏移點,最后touchend 根據偏移點確定是否是點擊,如果是點擊動態的構建一個event然后根據
設置的狀態獲取是單機、雙擊。

非zepto的tap事件未必會出現點透問題。

2.解決方法

1> 使用一個(透明)遮罩層,屏蔽所有事件,然后400ms(對於IOS來說是個理想值)后自動隱藏

.touchFix{visibility: hidden;width: 100%;height: 100%;position: absolute;left: 0px;top: 0px;z-index: 9999;}

2> touchstart換成touchend,並且用preventDefault阻止默認事件,因為觸發touchend需要200ms所以可以把觸發時間這個原理問題解決掉

$("#cbFinish").on("touchend", function (e) {
  e.preventDefault();
});

3> zepto最新版已經修復了這個問題,或者使用fastclick、hammer等通用庫

4> 直接用click,不考慮延遲
5> 下層避開click事件,如a鏈接改為span等標簽,使用js跳轉頁面


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM