资讯专栏INFORMATION COLUMN

移动端使用swiper+iscroll+fastClick:安卓触摸swiper会触发点击事件。

KoreyLee / 500人阅读

摘要:难道是安卓上和执行顺序异于其他浏览器。因为使用了以后事件变得极其敏感,所有的事件触发之前,都会触发。按照的逻辑,一旦触发之后,所有的都被阻止冒泡,就会出现上面说的问题,解决方案如下图增加上图这个判定的即可。

这两天做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都被阻止冒泡,就会出现上面说的问题,解决方案如下图:

增加上图这个判定的即可。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/109404.html

相关文章

  • 移动触摸点击事件优化(fastclick源码学习)

    摘要:移动端触摸点击事件优化源码学习最近在做一些微信移动端的页面,在此记录关于移动端触摸和点击事件的学习优化过程,主要内容围绕展开。当指针设备通常指鼠标在元素上移动时事件被触发。移动端有延迟问题,可没有哦。 移动端触摸、点击事件优化(fastclick源码学习) 最近在做一些微信移动端的页面,在此记录关于移动端触摸和点击事件的学习优化过程,主要内容围绕fastclick展开。fastclic...

    paney129 评论0 收藏0
  • 移动触摸点击事件优化(fastclick源码学习)

    摘要:移动端触摸点击事件优化源码学习最近在做一些微信移动端的页面,在此记录关于移动端触摸和点击事件的学习优化过程,主要内容围绕展开。当指针设备通常指鼠标在元素上移动时事件被触发。移动端有延迟问题,可没有哦。 移动端触摸、点击事件优化(fastclick源码学习) 最近在做一些微信移动端的页面,在此记录关于移动端触摸和点击事件的学习优化过程,主要内容围绕fastclick展开。fastclic...

    fxp 评论0 收藏0
  • 第六天 移动Web开发注意事项

    摘要:随着移动互联网的发展,移动已经逐渐成为互联网的主要入口,随之而来的是前端在移动开发上面临的各种机遇与挑战,本文就一些常见移动端问题对移动开发需要注意的事项进行一下总结,必然不可能涉及方方面面,但会随着笔者的积累持续更新。 随着移动互联网的发展,移动Web已经逐渐成为互联网的主要入口,随之而来的是前端在移动Web开发上面临的各种机遇与挑战,本文就一些常见移动端问题对移动Web开发需要注意...

    妤锋シ 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<