點選穿透原理及解決

一、事件觸發順序

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，為了讓彈出層有模態框的效果，我又加了乙個遮罩層。

底層元素

彈出層關閉

$('#closepopup').on('tap', function

(e));
$('#underlayer').on('click', function
());

而由於click事件的滯後性（300ms），在這300ms內上層元素隱藏或消失了，下層同樣位置的dom元素觸發了click事件（如果是input框則會觸發focus事件），看起來就像點選的target「穿透」到下層去了。

因此，點選穿透的現象就容易理解了，在這 300ms 以內，因為上層元素隱藏或消失了，由於 click 事件的滯後性，同樣位置的 dom 元素觸發了 click 事件（如果是 input 則觸發了 focus 事件）。在**中，給我們的感覺就是 target 發生了飄移。

三、解決

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

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

ie 10可以用 css 取消點選穿透的延遲：

html

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

pointer-events:  auto | none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all | inherit;

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

屬性含義

auto

預設值，滑鼠或觸屏事件不會穿透當前層

none

元素不再是target，監聽的元素變成了下層的元素（如果子元素設定成 auto，點選子元素會繼續監聽事件）

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

解決點選穿透的最佳實踐

出現的問題 移動端中，一般在上層的元素使用touchstart touchmove touchend繫結事件，而下層的元素使用click事件。當使用者觸控上層元素關閉或者刪除元素時，下層的元素顯露出來，並觸發了點選事件。原因 瀏覽器為了判斷使用者是否雙擊，所以在觸控事件發生完畢之後，300ms後才觸...

移動開發之fastclick 點選穿透

穿透 點穿 是在mobile各種瀏覽器上發生的常見的bug。可能是由click事件的延遲 300ms 或者事件冒泡導致 現象 在a頁面中有個 btn1 或a標籤 在b頁面中有個 btn2，btn1和btn1都在螢幕同乙個位置，兩個按鈕都有綁有自己的點選事件。btn1的click事件觸發後跳轉到b頁面...

Vue移動端 Web App 點選穿透問題解決方案

在近期的乙個移動端專案中，有乙個頁面需要有彈框提示，並且這個彈框通過關閉按鈕關閉。頁面當中使用了 iscroll 來實現頁面區域性滾動，在 iscroll 的配置當中把tap和click事件都開啟了。如下 mousewheel true,click true,tap true 在實現過程中，遇到了乙...