解决移动端touchstart事件穿透问题方案

【来源】：在开发移动端网站时，会经常徘徊在click和touchstart之间；因为touchstart虽然好用和快速响应；但是其缺点也是显而易见的，当我们大面积的使用touchstart的时候就会遇到，滚动页面的时候会频繁的触发，导致其不友好的体验；所以，不能单独的说哪个好与不好，而应该利用其长处，规避其缺点；

而且，对于a标签，在移动端的跳转方式，等同于click（经过自己实际体验）

【问题】在我们在上层触发touchstart的时候，下层的click或者a标签都会同时被触发（严格的讲是350ms之后触发）

【原理】是由于click的触发时间是500ms，而touchstart触发时间是350ms，由于500>350导致的用户出现了穿透问题

【解决办法】解决问题的办法有多重多样，换个角度换个方式，就有不同的答案；下面介绍几个我在实际中行之有效的方法，仅供参考：

1. 可以把touchstart换成touchend，因为触发touchend需要200ms所以可以把触发时间这个原理问题解决掉（这个也是我经常使用的，处理点击问题）

2. 大家也可以在触发下面一层覆盖上一层透明层，让其穿透到这个透明层，而不是有事件的那层（这种方法增加了层级，也增加的编码的复杂度）

以上是解决移动端touchstart事件穿透问题方案的详细内容。更多信息请关注PHP中文网其他相关文章！