［面试没回答上的问题2］IOS上给body绑定click事件的bug

最新推荐文章于 2025-09-10 11:40:22 发布

weixin_30628077

最新推荐文章于 2025-09-10 11:40:22 发布

阅读量80

点赞数

CC 4.0 BY-SA版权

文章标签：面试

原文链接：http://www.cnblogs.com/xjcjcsy/p/6135365.html

本文详细解析了iOS设备上特定的点击事件Bug，探讨了在DOM元素不存在时将其click事件直接绑定到body节点上导致的问题，并提供了有效的解决方案。

　　面试被问到ios上的bug，自己提到绑定click事件的bug，但是并没有把问题讲的很清楚，这里再清理一下思路。

　　这个bug只在IOS上有，包括ihone，ipad，由于ios浏览器都用的safari内核，所以ios浏览器全部中枪。

　　bug描述

　　在进行事件委托时，如果将未存在于DOM的元素事件直接委托到body上的话,会导致事件委托失效，调试结果为事件响应到body子元素为止，既没有冒泡到body上，也没有被body所捕获。但如果事件是DOM元素本身具有的，则不会触发bug。换而言之，只有元素的非标准事件（比如click事件之于div）才会触发此bug。

如何避免bug触发：不要委托到body结点上，委托到任意指定父元素都可以，或者使用原生具有该事件的元素，如使用click事件触发就用a标签包一层。
使用touch事件代替click，如果是弹出层会有点透的问题存在。
已触发如何修补：safari对事件的解析非常特殊，如果一个事件曾经被响应过，则会一直冒泡（捕获）到根结点，所以对于已大规模触发的情况，只需要在body元素的所有子元素绑定一个空事件就好了，如：
```
("body > *").on("click", function(){};);
```
可能会对性能有一定影响，但是使用方便，大家权衡考虑吧~~~

转载于:https://www.cnblogs.com/xjcjcsy/p/6135365.html