點透事件：是指兩個元素其中一個元素具有默認的點擊事件，當我們讓不具有點擊事件的元素隱藏起來，會觸發(fā)另一個元素的點擊事件，這種行為被稱之為點透事件。

如下圖所示：當我們給div元素添加touchstart事件讓div元素隱藏起來，則a標簽會發(fā)生跳轉。相當于我們"點透"了div元素，從而觸發(fā)了a標簽的默認跳轉行為，這就是所謂的點透事件。

分析這種點透事件的原因，我們需要了解移動端和PC端的事件的不同之處：

1、PC端所有的事件都能夠在移動端被觸發(fā).也就是說索然移動端目前主要是touch事件，但是其他的事件也會被觸發(fā)，只是沒有相對應的事件處理函數(shù)，比如touchstart就觸發(fā)了click事件。

2、PC端事件在移動端觸發(fā)有300毫秒延遲，這是因為PC端的事件太多，可能同一個行為能夠觸發(fā)非常多的事件，瀏覽器需要通過這300毫秒內的行為，判斷究竟觸發(fā)的是哪個事件。比如點擊一下，觸發(fā)的事件可能有點擊事件，鼠標按下事件，雙擊事件等。瀏覽器需要根據(jù)就下來你的操作來判斷究竟屬于哪個事件，如果接下來你不進行操作那么就是點擊事件，如果你連續(xù)點擊了，那么可能是雙擊事件。

3、移動端事件沒有300毫秒延遲，因為移動端事件簡單，只有touch幾種事件，不存在相同的事件。

根據(jù)上面的事件機制我們來分析上面的代碼：

首先我們點擊div以后，觸發(fā)了多個事件，包括click,doubleclick,mousedown,touchstart等事件，其中只有touchstart綁定了事件處理函數(shù)，其中touchstart是移動端事件沒有延遲，因此div層馬上消失，但是click事件有300ms的延遲，在這個地方會執(zhí)行click的事件處理函數(shù)，由于a標簽具有click的默認事件，因此會觸發(fā)a標簽的跳轉，這就是所謂的'點透'。其實只不過是PC端事件在移動端有300ms延遲造成的。

點透事件的解決辦法：取消元素的默認點擊事件

點透事件造成的問題是本來不應該跳轉的元素發(fā)生了跳轉，因此我們需要阻止掉元素的默認跳轉行為。但是如果我們阻止了元素的默認跳轉行為，在其他地方需要進行跳轉時就無法正常跳轉了，因此我們需要設置新的跳轉行為。

上面我們通過使用移動端的阻止默認事件的方法，阻止了所有的默認行為，也包括默認跳轉。但是a標簽在其他情況下，需要正常跳轉，這時候我們需要重新定義a標簽的跳轉。通過出發(fā)touchend事件時，將其跳轉到對應的href。但是通過touchend事件觸發(fā)的點擊事件可能存在問題，因為還有可能touchmove也會觸發(fā)a標簽的點擊事件(誤觸)。

因此我們需要判斷究竟是touchend觸發(fā)了點擊事件還是touchmove觸發(fā)了點擊事件。只有在touchend觸發(fā)時，才實現(xiàn)跳轉。

總結

以上是生活随笔為你收集整理的移动端 关闭浏览器事件_前端开发中什么是移动端点透事件？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。