javascript - tap可以解决click延迟300ms的疑惑?
给我你的怀抱
给我你的怀抱 2017-05-19 10:13:16
0
5
562

click&tap

移动端大家比较推荐的写法都是采用zepto的tap事件代替click,理由一般是click事件有传说中的300ms延迟。

测试结果

但实际测试发现click事件还比tap事件相应快一些。

click 和 tap 触发延迟只有100ms左右

demo

     click&tap  

click me

output

//output click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:56 =========touchstart====== click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:57 1494338413993 click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:51 =========touchend====== click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:52 1494338414081 click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:31 =========click1====== click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:32 1494338414082 click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:41 =========click2====== click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:42 1494338414083 click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:36 =========zepto tap1====== click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:37 1494338414084 click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:46 =========zepto tap2====== click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:47 1494338414084

相关问题

移动端采用zepto的tap事件时会有点透的现象。

原因一般是:在tap事件中关闭或者隐藏了父级(一般情况下是遮罩层)的dom,而子dom恰好也存在点击事件,这样由于事件流机制(捕获冒泡)导致子级dom也触发了点击事件。

分析:都在冒泡阶段(事件触发默认冒泡阶段)的话,父级肯定比子集后触发,应该不会产生点透现象。

有些博客文章说父级使用tap,子集使用click。看demo中的触发时间也不太发生这种情况。

主要是会有那个傻逼在一个业务逻辑中同时使用click和tap呢?

所以基本上感觉主要是同时使用捕获阶段触发事件。但是这样也有一个问题,zepto的事件机制是基于事件冒泡,touch.js中事件都是绑定在document上的。

给我你的怀抱
给我你的怀抱

全部回复 (5)
Peter_Zhu

都用tap 或者引入fastclick.js

    阿神

    建议引用fastclick.js,可以解决click事件会有300毫秒的延迟
    官网 https://github.com/ftlabs/fas...

      Peter_Zhu

      zepto的tap事件也只是模拟,而且效率也一般,自然没有原生的click响应快。如果是比较简单的需求(比如只需要响应“点击”事件),可以考虑用fastclick,好处是原有的click事件处理不用改,且可以同时适配pc端和移动端。但如果只是移动端需求,那直接用原生的touchstart事件就可以了。

      另外还有一种解决思路是直接上手势库,比如Hammerjs或者腾讯的AlloyFinger之类的,适合有比较复杂的手势需求的场景。

        巴扎黑

        为啥不考虑下touchstart

          黄舟

          纠正一下你的点透事件的原因哦,不是因为冒泡机制,而是因为点击事件的延迟。

          • 比如,点击关闭按钮,touchend首先触发tap,弹出层和遮罩就被隐藏了。touchend后继续等待300ms发现没有其他行为了,则继续触发click,由于这时弹出层已经消失,所以当前click事件的target就在底层元素上,于是就触发了底层事件内容。整个事件触发过程为 touchend -> tap -> click。

            最新下载
            更多>
            网站特效
            网站源码
            网站素材
            前端模板
            关于我们 免责声明 Sitemap
            PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!