點選穿透原理及解決

一、事件觸發順序

　　PC網頁上的大部分操作都是用滑鼠的，即響應的是滑鼠事件，包括

mousedown

、

mouseup

mousemove

和

click

事件。一次點選行為，可被拆解成：

mousedown

mouseup

click

三步。

　　手機上沒有滑鼠，是以就用觸摸事件去實作類似的功能。touch事件包含

touchstart

touchmove

touchend

，注意手機上并沒有

tap

事件。手指觸發觸摸事件的過程為：

touchstart

touchmove

touchend

。

　　手機上沒有滑鼠，但不代表手機不能響應mouse事件（其實是借助touch去觸發mouse事件）。也就是說在移動端的click事件可以拆解為：

touchstart

touchmove

touchend -> click。

　　浏覽器在 touchend 之後會等待約 300ms ，如果沒有 tap 行為，則觸發 click 事件。而浏覽器等待約 300ms 的原因是，判斷使用者是否是輕按兩下（double tap）行為，輕按兩下過程中就不适合觸發 click 事件了。由此可以看出 click 事件觸發代表一輪觸摸事件的結束。

　　上面說到原生事件中并沒有 tap 事件，可以參考經典的 zepto.js 對 singleTap 事件的處理。見源碼 136-143 行

　　可以看出，singleTap 事件的觸發時機 —— 在 touchend 事件響應 250ms 無操作後，觸發singleTap。

二、點選穿透場景及原因

　　有了以上的基礎，我們就可以了解為什麼會出現點選穿透現象了。我們經常會看到“彈窗/浮層”這種東西，我做個了個demo。

　　整個容器裡有一個底層元素的div，和一個彈出層div，為了讓彈出層有模态框的效果，我又加了一個遮罩層。

<div class="container">
    <div id="underLayer">底層元素</div>

    <div id="popupLayer">
        <div class="layer-title">彈出層</div>
        <div class="layer-action">
            <button class="btn" id="closePopup">關閉</button>
        </div>
    </div>
</div>
<div id="bgMask"></div>

　　然後為底層元素綁定 click 事件，而彈出層的關閉按鈕綁定 tap 事件。

$('#closePopup').on('tap', function(e){
    $('#popupLayer').hide();
    $('#bgMask').hide();
});

$('#underLayer').on('click', function(){
    alert('underLayer clicked');
});

　　點選關閉按鈕，touchend首先觸發tap，彈出層和遮罩就被隐藏了。touchend後繼續等待300ms發現沒有其他行為了，則繼續觸發click，由于這時彈出層已經消失，是以目前click事件的target就在底層元素上，于是就alert内容。整個事件觸發過程為 touchend -> tap -> click。

　　而由于click事件的滞後性（300ms），在這300ms内上層元素隐藏或消失了，下層同樣位置的DOM元素觸發了click事件（如果是input框則會觸發focus事件），看起來就像點選的target“穿透”到下層去了。

　　是以，點選穿透的現象就容易了解了，在這 300ms 以内，因為上層元素隐藏或消失了，由于 click 事件的滞後性，同樣位置的 DOM 元素觸發了 click 事件（如果是 input 則觸發了 focus 事件）。在代碼中，給我們的感覺就是 target 發生了飄移。

三、解決

1. 觸摸結束時 touchend 事件觸發時，preventDefault()。看上去好像沒有什麼問題，但是，很遺憾的是不是所有的浏覽器都支援。

　　2. 禁止頁面縮放通過設定meta标簽，可以禁止頁面縮放，部分浏覽器不再需要等待 300ms，導緻點選穿透。點選事件仍然會觸發，但相對較快，是以 click 事件從某種意義上來說可以取代點選事件，而代價是犧牲少數使用者（click 事件觸發仍然較慢）的體驗。

<meta name="viewport" content="width=device-width, user-scalable=no">

IE 10可以用 CSS 取消點選穿透的延遲：

html {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}

IE 11+ 可以用

touch-action: manipulation;

屬性來阻止元素的輕按兩下縮放。

　　3. CSS3 的方法雖然主要講的是事件，但是有必要介紹一個 CSS3 的屬性 —— pointer-events。

pointer-events:  auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit;

pointer-events 屬性有很多值，有用的主要是 auto 和 none，其他屬性為 SVG 服務。

檢視浏覽器支援情況可見移動端開發還是可以用的。

屬性	含義
auto	預設值，滑鼠或觸屏事件不會穿透目前層
none	元素不再是target，監聽的元素變成了下層的元素（如果子元素設定成 auto，點選子元素會繼續監聽事件）

　　4.延長消失事件可以利用jquery的fadeout，設定事件大于300ms。

本文參考自：https://segmentfault.com/a/1190000003848737

　　　　　　http://liudong.me/web/touch-defect.html