touch事件会穿透页面,电脑上chrome模拟不会有,但手机上实际操作会出现


首先~:下面层是a标签(一定要慎用)的还是会穿透,但是div等这些便签的居然不会穿透了...

穿透(点穿)是在mobile各种浏览器上发生的常见的bug。可能是由click事件的延迟或者事件冒泡导致。

移动web开发常用的Zepto库中的touch和tap事件就会有点穿的bug(Zepto的事件都绑在Document上)。

常用的解决方案如下:

1 使用fastclick,这个可以非常完美的解决点穿问题。

2 在touchend事件回调中加入preventDefault, 并在下一层中加上pointer-events:none。


移动端的click都是touch之后,才会模拟触发。

触发的顺序是

touchstart

touchmove

touchend

mousedown

mousemove

mouseenter

click

在重叠的区域里,被遮盖的元素绑定click,遮盖的元素绑定touch事件,且touch后遮盖的元素会隐藏的话,就会造成穿透,因为click是在touch之后延迟触发的,浏览器会误认为是在遮盖的元素上触发了click。

最好的解决方案是 自己通过touchstart,touchmove,touchend,来模拟一个click(tap)事件,这样除了防止穿透外,事件响应速度也会提高。



最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 移动页面点击穿透问题解决方案 一.click与300ms延迟 移动浏览器提供一个特殊的功能:双击(double t...
    程序员之路阅读 9,229评论 0 2
  • 相关知识点 移动端、 适配(兼容)、 ios点击事件300ms延迟、 点击穿透、 定位失效...... 问题&解决...
    sandisen阅读 25,767评论 3 67
  • 一.click与300ms延迟 移动浏览器提供一个特殊的功能:双击(double tap)放大 300ms的延迟就...
    Leslie_2386阅读 4,624评论 0 0
  • 七月十六,我开始了生活,开始了有大叔的生活。虽然一次还没见过,但是毕竟我们从三千多公里变成了两千多公里,从一道无法...
    swing0314阅读 1,589评论 0 1
  • 自古言:女人心 海底针!表明人心复杂,不要妄测。不用的经历,阅历不同,眼光自然不同。以己度人最是愚蠢,往往会陷入误区
    Eillen兔子菇凉阅读 1,643评论 0 0

友情链接更多精彩内容