博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
zepto之tap点透处理
阅读量:7081 次
发布时间:2019-06-28

本文共 672 字,大约阅读时间需要 2 分钟。

hot3.png

现象原因

zepto的tap通过兼听绑定在document上的touch事件来完成tap事件的模拟的,及tap事件是冒泡到document上触发的

再点击完成时的tap事件(touchstart\touchend)需要冒泡到document上才会触发,而在冒泡到document之前,用 户手的接触屏幕(touchstart)和离开屏幕(touchend)是会触发click事件的,因为click事件有延迟触发(这就是为什么移动端不 用click而用tap的原因)(大概是300ms,为了实现safari的双击事件的),所以在执行完tap事件之后,弹出来的选择马 上就隐藏了,此时click事件还在延迟的300ms之中,当300ms到来的时候,click到的其实不是完成而是隐藏之后的下方的元素,如果正下方的 元素绑定的有click事件此时便会触发,如果没有绑定click事件的话就当没click,但是正下方的是input输入框(或者select选择框或 者单选复选框),点击默认聚焦而弹出输入键盘,也就出现了上面的点透现象。

解决办法:

用touchend代替tap事件并阻止掉touchend的默认行为preventDefault()

设置点击事件为_tap

_tap = touchend in document ? "touchend":"click"

这样在执行的过程中就可以直接调用div.on(_tap, function(){})

转载于:https://my.oschina.net/leonaLily/blog/497310

你可能感兴趣的文章
js闭包
查看>>
CocoaPods Setting up CocoaPods master repo无反应时的处理
查看>>
linux驱动系列之s3c2440内存布局
查看>>
asp.net上传文件大小限制
查看>>
javascript基础拾遗——词法作用域
查看>>
该来的年终总结,还是来了
查看>>
HustOJ - 1001
查看>>
typedef void far *LPVOID 的具体定义
查看>>
webp图片转换工具
查看>>
2015.12.24(圣诞节) 解决Oralce数据库将具有相同属性的多行合并为一行的简单方法多年想要wmsys.wm_concat...
查看>>
嵌入式Linux之旅——环境搭建篇之烧写整个系统
查看>>
批量删除.svn文件夹、.svn文件
查看>>
python orm框架
查看>>
python数据结构
查看>>
POJ-1088 滑雪 dp
查看>>
数组元素逆置[拙劣的递归]
查看>>
IO 流之字符流的缓冲区
查看>>
NumberFormat类的用法
查看>>
linx 实用操作命令二
查看>>
数字转大写
查看>>