通过fastclick源码分析彻底解决tap“点透”(12)
</body>
</html>
这样的话,便不会点透了,这是因为zepto touch事件全部绑定值document,所以 e.preventDefault();无用
结果我们这里是直接在dom上,e.preventDefault();
便起了作用不会触发浏览器默认事件,所以也不存在点透问题了,至此点透事件告一段落......
帮助理解的图
代码在公司写的,回家后不知道图上哪里了,各位将就看吧
为什么zepto会点透/fastclick如何解决点透
我最开始就给老大说zepto处理tap事件不够好,搞了很多事情出来
因为他事件是绑定到document上,先touchstart然后touchend,根据touchstart的event参数判断该dom是否注册了tap事件,有就触发
于是问题来了,zepto的touchend这里有个event参数,我们event.preventDefault(),这里本来都是最上层了,这就代码压根没什么用
但是fastclick处理办法不可谓不巧妙,这个库直接在touchend的时候就触发了dom上的click事件而替换了本来的触发时间
意思是原来要350-400ms执行的代码突然就移到了50-100ms,然后这里虽然使用了touch事件但是touch事件是绑定到了具体dom而不是document上
所以e.preventDefault是有效的,我们可以阻止冒泡,也可以阻止浏览器默认事件,这个才是fastclick的精华部分,不可谓不高啊!!!
整个fastclick代码读来醍醐灌顶,今天收获很大,在此记录
后记
上面的说法有点问题,这修正一下:
首先,我们回到原来的zepto方案,看看他有什么问题:
因为js标准本不支持tap事件,所以zepto tap是touchstart与touchend模拟而出 zepto在初始化时便给document绑定touch事件,在我们点击时根据event参数获得当前元素,并会保存点下和离开时候的鼠标位置 根据当前元素鼠标移动范围判断是否为类点击事件,如果是便触发已经注册好的tap事件
然后fastclick处理比较与zepto基本一致,但是又有所不同
fastclick是将事件绑定到你传的元素(一般是document.body)
② 在touchstart和touchend后(会手动获取当前点击el),如果是类click事件便手动触发了dom元素的click事件
所以click事件在touchend便被触发,整个响应速度就起来了,触发实际与zepto tap一样