解決點選穿透的最佳實踐

2022-06-05 09:42:08 字數 515 閱讀 2457

出現的問題:

移動端中,一般在上層的元素使用touchstart、touchmove、touchend繫結事件,而下層的元素使用click事件。

當使用者觸控上層元素關閉或者刪除元素時,下層的元素顯露出來,並觸發了點選事件。

原因:瀏覽器為了判斷使用者是否雙擊,所以在觸控事件發生完畢之後,300ms後才觸發click事件

最佳解決實踐。

1.首先全部元素都使用click事件。

2.var curtarget=null;

//選中事件

document.body.touchstart((e)=>{

curtarget=e.target;

//在body中攔截點選事件

document.body.touchend((e)=>{

e.preventdefault();

var clickevent=new mouseevent('click');

curtarget.dispatchevent(clickevent);

點選穿透原理及解決

一 事件觸發順序 pc網頁上的大部分操作都是用滑鼠的,即響應的是滑鼠事件,包括mousedown mouseup mousemove和click事件。一次點選行為,可被拆解成 mousedown mouseup click 三步。手機上沒有滑鼠,所以就用觸控事件去實現類似的功能。touch事件包含t...

移動開發之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 在實現過程中,遇到了乙...