6.6 优化事件

最后更新于:2022-04-01 23:34:23

# fastclick 这效果其实看起来已经不错了,足够留畅,也比较酷 但是点击按钮还是觉得有点慢,尤其是一些低端机上,回想上节讲的《事件:touch和click的区别》,似乎我们还能更完美 ### 事件:touch和click的区别 在web里只有click,而移动端既有click又有touch,所以问题就来了 我怎么样区分它们呢? 三种在规范中列出并获得跨移动设备广泛实现的基本触摸事件: 1. touchstart :手指放在一个DOM元素上。 2. touchmove :手指拖曳一个DOM元素。 3. touchend :手指从一个DOM元素上移开。 其实还有一个touchcancel 其实click也是touch,不过先识别一下,如果是touch就是touch,如果不是touch就当click处理。 结论肯定是touch反应比click快,所以移动的有一个比较好的实践 1. 使用zeptojs的tap的手势 2. 使用fastclick库 ### 用法 [https://github.com/ftlabs/fastclick](https://github.com/ftlabs/fastclick) 用法 ~~~ FastClick.attach(document.body); ~~~ attach方法是给对应的selector增加快速点击事件,也就是把click转成touch。 简单封装 ~~~ function add_fast_click(){ if ('addEventListener' in document) { document.addEventListener('DOMContentLoaded', function() { FastClick.attach(document.body); }, false); } } add_fast_click(); ~~~
';