成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

移動(dòng)端使用swiper+iscroll+fastClick:安卓觸摸swiper會(huì)觸發(fā)點(diǎn)擊事件。

KoreyLee / 559人閱讀

摘要：難道是安卓上和執(zhí)行順序異于其他瀏覽器。因?yàn)槭褂昧艘院笫录兊脴O其敏感，所有的事件觸發(fā)之前，都會(huì)觸發(fā)。按照的邏輯，一旦觸發(fā)之后，所有的都被阻止冒泡，就會(huì)出現(xiàn)上面說(shuō)的問(wèn)題，解決方案如下圖增加上圖這個(gè)判定的即可。

這兩天做H5頁(yè)面，使用swiper+iscroll+fastClick，并沒(méi)有用swiper提供的tap和click事件，自己在元素上bind，因?yàn)榛卣{(diào)函數(shù)是統(tǒng)一處理，就沒(méi)用swiper的tap，后面發(fā)現(xiàn)即使是使用了swiper提供的，也是會(huì)有問(wèn)題，本人用的ios設(shè)備，做完一切流暢，但是提交給測(cè)試確發(fā)現(xiàn)安卓有個(gè)問(wèn)題，如題。

swiper v4.5.0

研究了一下swiper源碼，發(fā)現(xiàn)初始化的時(shí)候會(huì)給容器注冊(cè)一個(gè)click事件

這里是用來(lái)判斷用戶當(dāng)前是否觸發(fā)touchmove事件，如果是touchmove那么就阻止所有bind元素的click事件，這個(gè)邏輯沒(méi)錯(cuò)啊，于是繼續(xù)在模擬器中調(diào)試。

打了各種斷點(diǎn)調(diào)試，發(fā)現(xiàn)swiper綁定的touchend中代碼邏輯執(zhí)行順序在兩個(gè)客戶端中是不一樣的，神奇。

如上圖，ios中先執(zhí)行了onClick方法，后執(zhí)行Utils.nextTick的回調(diào);android則相反，先執(zhí)行nextTick的回調(diào);然后看了下，swiper是怎么封裝的回調(diào)Utils.nextTick

??? 好像沒(méi)問(wèn)題啊，eventLoop執(zhí)行順序?qū)Φ陌　ｋy道是安卓上setTimeout和event執(zhí)行順序異于其他瀏覽器。

敲段代碼測(cè)試一下（注意，下面這段代碼直接用瀏覽器打開(kāi)，執(zhí)行順序是相同的，但是，找個(gè)容器去掛載，比如tomcat，執(zhí)行順序的問(wèn)題就出來(lái)了）：





  touchend-click-setTimeout
  
  
  
  
  
  
  
  
  



  

    
    
      
    touchend-btn

結(jié)果如下
ios執(zhí)行順序: touchstart -> touchend -> click -> setTimeout
android執(zhí)行順序: touchstart -> touchend -> setTimeout -> click

到這里我就沒(méi)繼續(xù)往下找原因了，直接修改，解決問(wèn)題。

不知道有沒(méi)有大佬能幫忙看下，為啥ios和安卓執(zhí)行順序會(huì)有這種出入？望告知

另附贈(zèng)一個(gè)問(wèn)題吧，如果你用華為7S的部分機(jī)型進(jìn)行測(cè)試，會(huì)發(fā)現(xiàn)，永遠(yuǎn)都無(wú)法點(diǎn)擊自己bind的事件。因?yàn)槭褂昧薸scroll以后touchmove事件變得極其敏感，所有的click事件觸發(fā)之前，都會(huì)觸發(fā)touchmove。按照swiper的邏輯，一旦觸發(fā)touchmove之后，所有的click都被阻止冒泡，就會(huì)出現(xiàn)上面說(shuō)的問(wèn)題，解決方案如下圖：

增加上圖這個(gè)判定的即可。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/109404.html

相關(guān)文章

  • 移動(dòng)端觸摸、點(diǎn)擊事件優(yōu)化（fastclick源碼學(xué)習(xí)）

    摘要：移動(dòng)端觸摸點(diǎn)擊事件優(yōu)化源碼學(xué)習(xí)最近在做一些微信移動(dòng)端的頁(yè)面，在此記錄關(guān)于移動(dòng)端觸摸和點(diǎn)擊事件的學(xué)習(xí)優(yōu)化過(guò)程，主要內(nèi)容圍繞展開(kāi)。當(dāng)指針設(shè)備通常指鼠標(biāo)在元素上移動(dòng)時(shí)事件被觸發(fā)。移動(dòng)端有延遲問(wèn)題，可沒(méi)有哦。 移動(dòng)端觸摸、點(diǎn)擊事件優(yōu)化（fastclick源碼學(xué)習(xí)） 最近在做一些微信移動(dòng)端的頁(yè)面，在此記錄關(guān)于移動(dòng)端觸摸和點(diǎn)擊事件的學(xué)習(xí)優(yōu)化過(guò)程，主要內(nèi)容圍繞fastclick展開(kāi)。fastclic...

    paney129 評(píng)論0 收藏0

  • 移動(dòng)端觸摸、點(diǎn)擊事件優(yōu)化（fastclick源碼學(xué)習(xí)）

    摘要：移動(dòng)端觸摸點(diǎn)擊事件優(yōu)化源碼學(xué)習(xí)最近在做一些微信移動(dòng)端的頁(yè)面，在此記錄關(guān)于移動(dòng)端觸摸和點(diǎn)擊事件的學(xué)習(xí)優(yōu)化過(guò)程，主要內(nèi)容圍繞展開(kāi)。當(dāng)指針設(shè)備通常指鼠標(biāo)在元素上移動(dòng)時(shí)事件被觸發(fā)。移動(dòng)端有延遲問(wèn)題，可沒(méi)有哦。 移動(dòng)端觸摸、點(diǎn)擊事件優(yōu)化（fastclick源碼學(xué)習(xí)） 最近在做一些微信移動(dòng)端的頁(yè)面，在此記錄關(guān)于移動(dòng)端觸摸和點(diǎn)擊事件的學(xué)習(xí)優(yōu)化過(guò)程，主要內(nèi)容圍繞fastclick展開(kāi)。fastclic...

    fxp 評(píng)論0 收藏0

  • 第六天 移動(dòng)端Web開(kāi)發(fā)注意事項(xiàng)

    摘要：隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，移動(dòng)已經(jīng)逐漸成為互聯(lián)網(wǎng)的主要入口，隨之而來(lái)的是前端在移動(dòng)開(kāi)發(fā)上面臨的各種機(jī)遇與挑戰(zhàn)，本文就一些常見(jiàn)移動(dòng)端問(wèn)題對(duì)移動(dòng)開(kāi)發(fā)需要注意的事項(xiàng)進(jìn)行一下總結(jié)，必然不可能涉及方方面面，但會(huì)隨著筆者的積累持續(xù)更新。 隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，移動(dòng)Web已經(jīng)逐漸成為互聯(lián)網(wǎng)的主要入口，隨之而來(lái)的是前端在移動(dòng)Web開(kāi)發(fā)上面臨的各種機(jī)遇與挑戰(zhàn)，本文就一些常見(jiàn)移動(dòng)端問(wèn)題對(duì)移動(dòng)Web開(kāi)發(fā)需要注意...

    妤鋒シ 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<