移動開發之fastclick 點擊穿透

穿透（點穿）是在mobile各種瀏覽器上發生的常見的bug。可能是由click事件的延遲(300ms)或者事件冒泡導致

現象：在A頁面中有個 btn1<或a標簽>，在B頁面中有個 btn2，btn1和btn1都在屏幕同一個位置，兩個按鈕都有綁有自己的點擊事件。btn1的click事件觸發后跳轉到B頁面。當btn1被點擊后跳到B頁面，btn2按鈕的click事件也被觸發了

一般的解決方案如下：

a. 使用fastclick，這個可以非常完美的解決點穿問題。

b. 在touchend事件回調中加入preventDefault, 並在下一層中加上pointer-events:none。

但是頁面的a標簽還是存在點擊穿透，導致頁面跳轉， fastclick無效果

 

在網上搜索和實踐后總結如下方案

1.通過touchstart，touchmove，touchend，來模擬一個click（tap）事件，這樣除了防止穿透外，事件響應速度也會提高。

移動端的click都是touch之后，才會模擬觸發,觸發的順序是:

touchstart —> touchmove —> touchend —> mousedown —> mousemove —> mouseenter —> click

 

2.移動端存在300ms延時，那么在B頁面中先放一個遮罩層<div id="dcMask"> </div>，遮住頁面全部內容，然后等B頁面加載完  ，將遮罩層隱藏

<div id="dcMask"> </div>

$(function(){
　　setTimeout(function(){
　　　　$('#dcMask').hide();
　　},300);
});

3.使用css的 pointer-events:none

　　先使用 pointer-events 禁掉元素的點擊事件，頁面加載完300ms后恢復事件，設置 pointer-events:auto

a[href]{
　　pointer-events:none;
}

$(function(){
　　setTimeout(function(){
　　　　$('a[href]').css('pointer-events','auto');
　　},300);
});