场景描述(类似):
一个页面里存在A元素和B元素;B元素浮在A元素之上,A元素里具有a标签或者绑定了点击事件或表单元素;点击B元素后,隐藏或者删除B元素;再B元素隐藏或者删除的同时触发A元素里的a标签或者点击事件;点击穿透的现象发生;
问题产生的原因分析:
当我们在触屏上点击某个位置时候的时候,浏览器依次响应产生了几个事件,它们分别是:touchStart、touchEnd、click 事件,且click具有300毫秒的延迟时间。注意:即使你没有监听事件,事件依然存在的,浏览器默认行为。当单击B元素时候,事件触发先后顺序是先touchestart->touchend->click , 问题将在这里出现。
当发生了单击事件后,touchstart事件先执行B元素被隐藏了,接下来到touchend事件由于速度很快,所以A元素并没有响应;此时click事件由于延迟了300ms才执行,B元素已经隐藏,click单击发生了,由于没有了B元素,浏览器实现上会认为当次单击是对页面上的某个部分实行的,A元素里相应的位置的地方(元素)响应了click事件。于是就出现了穿透现象;
注:
给B元素绑定click事件 (点击访问DEMO) —— 不会穿透;
给B元素绑定touchstart事件 (点击访问DEMO) ——出现穿透现象
给B元素绑定touchend事件 (点击访问DEMO) ——出现穿透现象
移动端click事件300毫秒延迟:
用户在 iOS Safari 里边点击了一个链接。由于用户可以进行双击缩放或者双击滚动的操作,当用户一次点击屏幕之后,浏览器并不能立刻判断用户是确实要打开这个链接,还是想要进行双击操作。因此,iOS Safari 就等待 300 毫秒,以判断用户是否再次点击了屏幕。(几乎现在所有的移动端浏览器都有这个双击操作的功能,所以...)
Android dialog点击事件穿透
转载本文章为转载内容,我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题,欢迎原作者联系我们进行内容更正或删除文章。
下一篇:kvm虚拟机在哪里看list
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
mysql 关联查询主键索引未生效
需要有一定的MySQL基础才可以看哦~有学生成绩表(sc)如下,三个字段分别是:s_id 学生编号,c_id 课程编号,score 考试分数 问题二:按各科成绩进行排序,并显示排名;大家可以停下来想一下,要怎么才能实现?和上篇文章的解题思路基本一致,如何确定某个成绩的名次呢?就看和这条记录课程编号一样,分数比这条记录分数高的人有几个,比如数学成绩是80分,所有数学成绩里比80分高的有5
mysql 关联查询主键索引未生效 mssql 查询无记录时sum mysql sum按条件求和 mysql 关联查询 mysql 子查询