[ 面试没回答上的问题2]IOS上给body绑定click事件的bug
2016-12-05 20:26
411 查看
面试被问到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元素的所有子元素绑定一个空事件就好了,如:
可能会对性能有一定影响,但是使用方便,大家权衡考虑吧~~~
这个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(){};);
可能会对性能有一定影响,但是使用方便,大家权衡考虑吧~~~
相关文章推荐
- IOS上给body绑定click事件的bug
- IOS上给body和html绑定click事件的坑
- iOS使用on绑定click事件出现绑定父标签闪烁的问题
- 动态生成DOM元素绑定click事件无效问题
- 动态生成的html绑定click事件没有效果不执行 click事件重复绑定问题
- 解决给dom元素绑定click等事件无效问题的方法
- 面试相关材料--开放性问题回答和行为事件访谈型面试问题回答示例
- iOS上的jQuery.on()冒泡事件绑定 给body添加点击事件
- 关于Safari里quickOn绑定click事件闪屏问题的解决方案
- iOS面试中如何优雅回答Block导致循环引用的问题
- js中事件绑定,$("body").on("click")与$("").click()区别
- html页面在IOS-safari浏览器下绑定点击绑定事件的div时会显示灰色框的问题
- IOS下Iphone手机访问移动端页面,on预绑定的click事件不执行,解决方案
- IOS自带输入法中文不触发KEYUP事件导致vue双向绑定错误问题
- ios和安卓的input的click事件和change事件的加载顺序问题。
- 解决iOS的Safari浏览器解析绑定了onclick事件闪烁的问题
- 解决iOS的Safari浏览器解析绑定了onclick事件闪烁的问题
- 关于一个按钮绑定两个事件的问题,click和submit
- 解决给dom元素绑定click等事件无效问题的方法
- jquery bind('click')传参问题(例如:列表中每行绑定一个事件)