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