資訊專欄INFORMATION COLUMN
摘要：難道是安卓上和執行順序異于其他瀏覽器。因為使用了以后事件變得極其敏感，所有的事件觸發之前，都會觸發。按照的邏輯，一旦觸發之后，所有的都被阻止冒泡，就會出現上面說的問題，解決方案如下圖增加上圖這個判定的即可。
這兩天做H5頁面，使用swiper+iscroll+fastClick，并沒有用swiper提供的tap和click事件，自己在元素上bind，因為回調函數是統一處理，就沒用swiper的tap，后面發現即使是使用了swiper提供的，也是會有問題，本人用的ios設備，做完一切流暢，但是提交給測試確發現安卓有個問題，如題。
swiper v4.5.0
研究了一下swiper源碼，發現初始化的時候會給容器注冊一個click事件
這里是用來判斷用戶當前是否觸發touchmove事件，如果是touchmove那么就阻止所有bind元素的click事件，這個邏輯沒錯啊，于是繼續在模擬器中調試。
打了各種斷點調試，發現swiper綁定的touchend中代碼邏輯執行順序在兩個客戶端中是不一樣的，神奇。
如上圖，ios中先執行了onClick方法，后執行Utils.nextTick的回調;android則相反，先執行nextTick的回調;然后看了下，swiper是怎么封裝的回調Utils.nextTick
??? 好像沒問題啊，eventLoop執行順序對的啊。難道是安卓上setTimeout和event執行順序異于其他瀏覽器。
敲段代碼測試一下（注意，下面這段代碼直接用瀏覽器打開，執行順序是相同的，但是，找個容器去掛載，比如tomcat，執行順序的問題就出來了）：
touchend-click-setTimeout
touchend-btn
結果如下
ios執行順序: touchstart -> touchend -> click -> setTimeout
android執行順序: touchstart -> touchend -> setTimeout -> click
到這里我就沒繼續往下找原因了，直接修改，解決問題。
不知道有沒有大佬能幫忙看下，為啥ios和安卓執行順序會有這種出入？望告知
另附贈一個問題吧，如果你用華為7S的部分機型進行測試，會發現，永遠都無法點擊自己bind的事件。因為使用了iscroll以后touchmove事件變得極其敏感，所有的click事件觸發之前，都會觸發touchmove。按照swiper的邏輯，一旦觸發touchmove之后，所有的click都被阻止冒泡，就會出現上面說的問題，解決方案如下圖：
增加上圖這個判定的即可。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109404.html
摘要：移動端觸摸點擊事件優化源碼學習最近在做一些微信移動端的頁面，在此記錄關于移動端觸摸和點擊事件的學習優化過程，主要內容圍繞展開。當指針設備通常指鼠標在元素上移動時事件被觸發。移動端有延遲問題，可沒有哦。 移動端觸摸、點擊事件優化（fastclick源碼學習） 最近在做一些微信移動端的頁面，在此記錄關于移動端觸摸和點擊事件的學習優化過程，主要內容圍繞fastclick展開。fastclic...
摘要：移動端觸摸點擊事件優化源碼學習最近在做一些微信移動端的頁面，在此記錄關于移動端觸摸和點擊事件的學習優化過程，主要內容圍繞展開。當指針設備通常指鼠標在元素上移動時事件被觸發。移動端有延遲問題，可沒有哦。 移動端觸摸、點擊事件優化（fastclick源碼學習） 最近在做一些微信移動端的頁面，在此記錄關于移動端觸摸和點擊事件的學習優化過程，主要內容圍繞fastclick展開。fastclic...
摘要：隨著移動互聯網的發展，移動已經逐漸成為互聯網的主要入口，隨之而來的是前端在移動開發上面臨的各種機遇與挑戰，本文就一些常見移動端問題對移動開發需要注意的事項進行一下總結，必然不可能涉及方方面面，但會隨著筆者的積累持續更新。 隨著移動互聯網的發展，移動Web已經逐漸成為互聯網的主要入口，隨之而來的是前端在移動Web開發上面臨的各種機遇與挑戰，本文就一些常見移動端問題對移動Web開發需要注意...
閱讀 2735·2021-11-22 15:22
閱讀 1643·2021-11-22 14:56
閱讀 3620·2021-09-22 15:12
閱讀 2408·2021-09-02 15:41
閱讀 2128·2021-08-27 16:26
閱讀 1118·2019-08-30 15:55
閱讀 2144·2019-08-29 17:30
閱讀 672·2019-08-29 16:26
