黑马程序员技术交流社区

标题: 移动端事件穿透的原理与解决 [打印本页]

作者: 可爱的骨头 时间: 2020-12-5 21:41
标题: 移动端事件穿透的原理与解决
移动设备的流行，带动了移动互联网的快速发展，很多开发者开始进入移动开发领域。目前市面上主流的移动设备一般都使用触摸屏，触摸屏所使用的触摸事件模型与传统网页的鼠标事件模型有所区别，这种差异往往使初涉移动端的开发工程师陷入困境，事件穿透问题便是其中一个，本文将带你了解事件穿透及如何在实际项目中选择合适的方案解决事件穿透问题。
事件穿透是指触发某个目标元素的触摸事件时，会同时触发该目标元素相同位置中其他元素的鼠标点击事件。市面上解决事件穿透的方法有很多，大致可以分为两类：第一种是禁止混用 click 和 touch 两种事件；另一种是延迟元素的隐藏或移除。
禁用 click 事件

这种方法是将页面内所有元素的 click 事件改用 touch 事件。这种方法的好处非常明显，既解决了 click 事件延迟造成体验不佳的问题又解决了事件穿透的问题，但是缺点也很明显，就是 a 标签的链接跳转的处理问题。

禁用 a 标签的点击事件，改用 touch 事件触发链接跳转。

禁用 touch 事件

这种方法是将页面内所有元素的 touch 事件改用 click 事件。事件穿透不就是由于 touch 与 click 事件存在触发时间差造成的吗，全部都使用 click 事件就不会有问题。然而事实真的如此美好？当然不是的，首先要解决 click 事件延迟 300ms 的问题。

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2