出現的問題:
移動端中,一般在上層的元素使用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 在實現過程中,遇到了乙...