移動頁面【點選穿透】問題
1. click事件與300s延遲
移動瀏覽器,使用者觸碰頁面之後需等待一段時間來判斷是不是(double Tap)動作,而不是立即響應單擊(click),響應時間為300ms。
移動事件提供了 touchstart、 touchmove、 touchend 卻沒有提供tap支援 ,主流框架(庫)都是手動實現自定義tap事件來消除300ms延遲,提高頁面響應速度。
注意:簡單頁面,touchstart或touchmove可當做tap來用,但存在問題:手指接觸目標元素,按住不放,慢慢移除響應區域,會觸發touchstart事件執行對應的事件處理器(本不該觸發。), touchend 也存在類似問題。
2.點選穿透問題
1) 點選穿透 問題
點選蒙層(mask)上的關閉按鈕,蒙層消失後觸發了按鈕下面元素的click事件。
2)跨頁面點選穿透 問題
按鈕下面是href 屬性的a標籤,頁面也會發生跳轉,與上面相同原理。
3)另一種跨頁面點選穿透 問題
沒有mask,直接點選頁內按鈕跳轉至新頁,然後新頁面對應元素的click事件被觸 發。
3.解決方案
1)不要混用touch和click;
既然touch之後300ms會觸發click,只用touch或者只用click就自然不會存在問題。
①只用touch [簡單完美]
把所有click換成touch事件(touchstart,touchend,tap)
注意:<a>標籤的href也是click,需要去掉換成js控制的跳轉;
或者直接改成span+tap 控制跳轉,
如果要求不高,可以span+touchend就可以。
不用<a>標籤其實沒關係,移動app開發不用考慮SEO。
②只用click[不建議]
2)消費掉touch之後的click。
拿東西擋住;tap後延遲30ms再隱藏mask,pointe-revents;在下面元素的事件處理器裡做檢測(配合全域性flag)等。
①拿東西擋住[蠢萌不建議]
②tap後延遲350ms再隱藏mask[省力]
優點:改動小,只改mask;
缺點:隱藏mask變慢
③pointer-event[麻煩不建議]
④在下面元素的事件處理器裡做檢測(配合全域性flag)[麻煩不建議]
⑤fastclick[不如第一種]
引入fastclick庫;把頁面所有touch換成click