各位前端er(或所在的前端团队)在项目中都是怎么处理移动端的点击事件的?

对于移动端的点击触控,众所周知 click 有 300ms 延迟。比较好奇目前大家或是各个前端团队都是怎么选择方案的? 抛砖引玉,先说我自己目前所了解的吧: 1. 直接使用 fastclick 优点:全局引入,方便省事 缺点:增加插件冗余? 2. 使用 zepto touch 优点:基于 zepto 核心,还提供 singleTap, doubleTap, longTap, swipe 等简单触控类型判断。 缺点:坑多,例如使用 setTimeout 延迟触发事件,需要解决点透问题。 3. 直接原生绑定 …
关注者
489
被浏览
24230

14 个回答

谢邀 @马天翼

我们厂(支付宝)有一套移动端解决方案,叫做 Anima。里面包含移动端开发各方面的一系列组件。
Anima 中有一个库叫 Yocto(anima-yocto - Anima Yocto),是我们基于 Zepto 进行的定制,其中就包括对「点透」问题的解决(anima-yocto - Demo)。

至于淘宝那边,不清楚...
如果只是处理点击, 还是挺容易的, 但如果是有大量触摸操作, 尤其是自定义的手势操作, 主要要解决两个问题: 一个是手势识别容易扩展, 另一个是处理事件冒泡.

对于扩展来说, Hammer.js 使用的是 Recognizer 的方式, 而百度的 touch 中具体的事件和主要逻辑则是高度耦合的. (很想看看 anima-yocto 的解决方式, 但是 spm 装得头痛还是放弃了.)

对于冒泡处理, 举例来说, 比如现在有一个触摸事件, 在触发后要 stopPropagation, 但是期望是仅限于当前手势, 而不影响其他手势. 这个时候还单纯依赖内建的冒泡机制就行不通了.

当然, 可能对于绝大多数应用场景, 简单够用就是好的. 但如果能以合理的成本把问题解决得更好, 就更开心了. 广告一下我没有文档的轮子, 提供可用于支持多触点识别的 API, 隔离了不同触摸事件间的冒泡. 代码不长, 因为是 TypeScript 写的, 阅读起来应该也很容易:

GitHub - vilic/touch-delegate: A gesture library based on extensible identifiers.
为什么?