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事件不生效及其解决办法的更多相关文章
- 关于动态添加的html元素绑定的事件不生效的解决办法
1.可以通过行内添加事件的方法,比如onclick="fn()"; 在js中写好方法名对应的方法就可以了,如果绑定方法的元素太多 2.jquery的on事件绑定 //on事件可以给 ...
- ios 设备用jquery live绑定 click 事件不管用
问题描述:用js拼接的html追加到页面,然后用 live 绑定click事件不起作用 解决办法:1.直接在标签写onclick事件 2.给需要绑定的标签添加css样式{cursor:pointe ...
- [ 面试没回答上的问题2]IOS上给body绑定click事件的bug
面试被问到ios上的bug,自己提到绑定click事件的bug,但是并没有把问题讲的很清楚,这里再清理一下思路. 这个bug只在IOS上有,包括ihone,ipad,由于ios浏览器都用的safari ...
- JQuery on绑定click无效的的bug解决办法?
如果你在移动端使用zepto.js, touch 来代替click事件,那就没有上述标题的问题了.如果你仍然使用了click,在点击事件中苹果机就可能出现无效的结果. 第一种方法: 解决的方法很巧妙, ...
- iOS设备上出现的click,live,on点击失去效果
iOS设备上出现的点击事件失效,但是在Android上可以正常使用, 1.iOS设备对标签点击限制,不认为是可点击的标签,需要给要绑定点击事件的标签加上一个样式,cursor:pointer:这样就可 ...
- IOS上给body和html绑定click事件的坑
场景: 在ios上(包括iPhone和ipad) 给window ,html,document,body绑定click事件,点击不会触发 由于ios浏览器都用的safari内核,所以ios浏览器全部中 ...
- vue 移动端在div上绑定click事件 失效
在.vue的文件中使用了better-scroll,在div标签上绑定click事件后,无效. 原因:使用了better-scroll,默认它会阻止touch事件.所以在配置中需要加上click: t ...
- 在Windows笔记本上调试运行在iOS设备上的前端应用
我在每天工作中需要在不同的移动设备上测试我们开发的前端应用是否正常工作,比如iOS设备和Android设备.我用的工作笔记本电脑又是Lenovo的,安装的是Windows操作系统. 有的时候一个开发好 ...
- jquery批量绑定click事件
jquery批量绑定click事件: var selects = $(".public_select dd ul li"); debugger; /*$(".public ...
随机推荐
- HAL打开驱动失败
--- ---
- 【HDOJ】1196 Lowest Bit
水题,原理是计算机组成原理中的负数的补码的求码.利用按位与可解. #include <iostream> using namespace std; int main() { int n; ...
- c程序设计语言_习题8-6_利用malloc()函数,重新实现c语言的库函数calloc()
The standard library function calloc(n,size) returns a pointer to n objects of size size , with the ...
- 微信公共服务平台开发(.Net 的实现)2-------获得ACCESSTOKEN
成为了开发者之后微信平台会给您appid和secret,在订阅号中是没有的,所以因该申请一下服务号 有了ACCESSTOKEN才能做添加菜单,上传/下载图片等功能 private string Get ...
- BrnShop开源网上商城第三讲:插件的工作机制
这几天BrnShop的开发工作比较多,所以这一篇文章来的晚了一些,还请大家见谅呀!还有通知大家一下BrnShop1.0.312版本已经发布,此版本添加了报表统计等新功能,需要源码的园友可以点此下载.好 ...
- LightOJ 1236 Pairs Forming LCM 合数分解
题意:求所有小于等于n的,x,y&&lcm(x,y)==n的个数 分析:因为n是最小公倍数,所以x,y都是n的因子,而且满足这样的因子必须保证互质,由于n=1e14,所以最多大概在2^ ...
- python中的pth文件作用
python中有一个.pth文件,该文件的用法是: 首先xxx.pth文件里面会书写一些路径,一行一个. 将xxx.pth文件放在特定位置,则可以让python在加载模块时,读取xxx.pth中指定的 ...
- 非递归实现先序遍历 java leecode 提交
写完才知道自己学习都是似是而非啊,大家可以也在leecode上提交代码,纯手写,离开eclipse第一种方式:数据结构书上的,使用栈大概思路.1.不断将根节点的左孩子的左孩子直到为空,在这个过程入栈. ...
- jqGrid 设置列宽
在jqgrid显示出来之后,需要手动调整列宽. 1. 经过调查jqgrid本身不支持指定列宽,当然这个是说的的初始化完成后. 2. 经过调查手动是可以调整列宽,所以进行了事件的查看resizestop ...
- windows service自动重启服务
服务一般都能正常的运行,但有时候也会有一些假死现象,比如公司有一考勤服务就因为依赖于硬件厂家的api, 但厂家api运行一段时间后会默名的假死,引起整个服务假死,因为这一假死现象具有不确定性,所以不太 ...