阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Zepto 的点透问题如何解决?

      解决方案一

      github 上有一个叫做 fastclick 的库,它也能规避移动设备上 click 事件的;将它用 script 标签引入页面(该库支持 AMD,于是你也可以按照 AMD 规范,用诸如 require.js 的模块加载器引入),并且在 dom ready 时初始化在 body 上,

      然后给需要“无延迟点击”的元素绑定 click 事件(注意不再是绑定 zepto 的 tap 事件)即可。

      当然,你也可以不在 body 上初始化它,而在某个 dom 上初始化,这样,只有这个 dom 和它的子元素才能享受“无延迟”的点击;

      解决方案二:

      自己按照上述 fastclcik 的思路再开发一套东西,需要

      1. 一个优先于下面的“divClickUnder”捕获的事件
      2. 并且通过这个事件阻止掉默认行为(下面的“divClickUnder”对 click 事件的捕获,在 ios 的 safari,click 的捕获被认为和滚屏、点击输入框弹起键盘等一样,是一种浏览器默认行为,即可以被 event.preventDefault() 阻止的行为)。

      如,将 tap 事件改为 touchend(虽然意思肯定不完全一样,而且不够优雅),这样就直接在“divTapAbove”被捕获,而不是在 body 上才被捕获了,满足了 1;再在内部使用 preventDefault() 解决了 2,

      $divTapAbove.on('touchend',function(e){ // 改变了事件名称,tap 是在 body 上才被触发,而 touchend 是原生的事件,在 dom 本身上就会被捕获触发
      	$divTapAbove.hide()
      	$output.html($output.html() + 'tap<br/>')
      	e.preventDefault(); // 阻止“默认行为”
      })
      

      在使用 zepto 框架的 tap 相关方法时,一定要注意,如果绑定 tap 方法的 dom 元素在 tap 方法触发后会隐藏、css3 transfer 移走、requestAnimationFrame 移走等,而“隐藏、移走”后,它底下同一位置正好有一个 dom 元素绑定了 click 的事件、或者有浏览器认为可以被点击有交互反应的 dom 元素(举例:如 input type=text 被点击有交互反应是获得焦点并弹起虚拟键盘),则会出现“点透”现象。在这种情况下,我们应当采用上述两种方法来避免“点透”。

      原因分析:

      问题产生的原因分析:

      当我们在触屏上点击某个位置时候的时候,浏览器依次响应产生了几个事件,它们分别是:touchStart、touchEnd、click 事件,且 click 具有 300 毫秒的延迟时间。注意:即使你没有监听事件,事件依然存在的,浏览器默认行为。当单击 B 元素时候,事件触发先后顺序是先 touchestart->touchend->click , 问题将在这里出现。

      当发生了单击事件后,touchstart 事件先执行 B 元素被隐藏了,接下来到 touchend 事件由于速度很快,所以 A 元素并没有响应;此时 click 事件由于延迟了 300ms 才执行,B 元素已经隐藏,click 单击发生了,由于没有了 B 元素,浏览器实现上会认为当次单击是对页面上的某个部分实行的,A 元素里相应的位置的地方(元素)响应了 click 事件。于是就出现了穿透现象;

      • 注:
      • 给 B 元素绑定 click 事件 (点击访问 DEMO) —— 不会穿透;
      • 给 B 元素绑定 touchstart 事件 (点击访问 DEMO) ——出现穿透现象
      • 给 B 元素绑定 touchend 事件 (点击访问 DEMO) ——出现穿透现象

      移动端 click 事件 300 毫秒延迟:

      用户在 iOS Safari 里边点击了一个链接。由于用户可以进行双击缩放或者双击滚动的操作,当用户一次点击屏幕之后,浏览器并不能立刻判断用户是确实要打开这个链接,还是想要进行双击操作。

      因此,iOS Safari 就等待 300 毫秒,以判断用户是否再次点击了屏幕。

      更多面试题

      如果你想了解更多的前端面试题,请点击下面进行选择,这里基本包涵了市场上的所有前端方面的面试题,让你面试更加顺利。

      这些题库还在更新中,如果你有不错的面试题库欢迎分享给我,我整理后放上来;人人为我,我为人人,互帮互助,共同提高,祝大家都拿到心仪的Offer!

      目录
      目录