1. 程式人生 > >移動頁面【點選穿透】問題

移動頁面【點選穿透】問題

      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