點擊穿透原理及解決

1、事件觸發順序

　　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。

　　

2、點擊穿透場景及緣由

　　有了以上的基礎，咱們就能夠理解爲何會出現點擊穿透現象了。咱們常常會看到「彈窗/浮層」這種東西，我作個了個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 發生了飄移。

 

3、解決

      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