最近在做移动端的项目,在ios上对body绑定click事件实现事件代理冒泡至某些元素上不生效,怎么回事,如何解决呢?今天小编给大家带来了IOS设备上给body绑定click事件不生效的原因及解决办法,一起看看吧
事件背景:
最近在做一个移动端业务的时候碰到一个bug,在ios上对body绑定click事实现事件代理冒泡至某些元素上尽然不生效。
思考:
暂借助jquery展示下事件绑定代码,将所有标签含有data-tip属性的元素通过事件代理至body
$('body').on('click','[data-tip]',function(e){
console.log($(this.).attr('data-tip'))
})
这样做在android和pc上都可以正常实现,但是在ios上面对部分标签尽然不生效。比如 tr , span ...这样的标签
解决办法:
1.将click事件换成touch事件,同时还可以解决300ms的click延迟问题,但是需要e.stopPropagation()来阻止冒泡的处理会非常麻烦。
2.在对不能正常冒泡的元素上再进行一次事件绑定,比如对于tr可以在<table>上再进行一次事件代理。
3.最简洁的办法,在不能正常冒泡的元素的css属性里面添加,cursor:pointer属性。
4.换成可以正常冒泡的标签。
本文标题为:IOS设备上给body绑定click事件不生效的原因及解决办法
基础教程推荐
- Flutter手势密码的实现示例(附demo) 2023-04-11
- iOS开发教程之XLForm的基本使用方法 2023-05-01
- 解决Android Studio突然不显示logcat日志的问题 2023-02-04
- Android多返回栈技术 2023-04-15
- IOS应用内跳转系统设置相关界面的方法 2022-11-20
- android studio按钮监听的5种方法实例详解 2023-01-12
- Flutter绘图组件之CustomPaint使用详解 2023-05-12
- IOS 播放系统提示音使用总结(AudioToolbox) 2023-03-01
- Android开发使用RecyclerView添加点击事件实例详解 2023-06-15
- Android中的webview监听每次URL变化实例 2023-01-23
