事件背景:

  最近在做一个移动端业务的时候碰到一个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事件不生效及其解决办法的更多相关文章

  1. 关于动态添加的html元素绑定的事件不生效的解决办法

    1.可以通过行内添加事件的方法,比如onclick="fn()"; 在js中写好方法名对应的方法就可以了,如果绑定方法的元素太多 2.jquery的on事件绑定 //on事件可以给 ...

  2. ios 设备用jquery live绑定 click 事件不管用

    问题描述:用js拼接的html追加到页面,然后用 live 绑定click事件不起作用 解决办法:1.直接在标签写onclick事件   2.给需要绑定的标签添加css样式{cursor:pointe ...

  3. [ 面试没回答上的问题2]IOS上给body绑定click事件的bug

    面试被问到ios上的bug,自己提到绑定click事件的bug,但是并没有把问题讲的很清楚,这里再清理一下思路. 这个bug只在IOS上有,包括ihone,ipad,由于ios浏览器都用的safari ...

  4. JQuery on绑定click无效的的bug解决办法?

    如果你在移动端使用zepto.js, touch 来代替click事件,那就没有上述标题的问题了.如果你仍然使用了click,在点击事件中苹果机就可能出现无效的结果. 第一种方法: 解决的方法很巧妙, ...

  5. iOS设备上出现的click,live,on点击失去效果

    iOS设备上出现的点击事件失效,但是在Android上可以正常使用, 1.iOS设备对标签点击限制,不认为是可点击的标签,需要给要绑定点击事件的标签加上一个样式,cursor:pointer:这样就可 ...

  6. IOS上给body和html绑定click事件的坑

    场景: 在ios上(包括iPhone和ipad) 给window ,html,document,body绑定click事件,点击不会触发 由于ios浏览器都用的safari内核,所以ios浏览器全部中 ...

  7. vue 移动端在div上绑定click事件 失效

    在.vue的文件中使用了better-scroll,在div标签上绑定click事件后,无效. 原因:使用了better-scroll,默认它会阻止touch事件.所以在配置中需要加上click: t ...

  8. 在Windows笔记本上调试运行在iOS设备上的前端应用

    我在每天工作中需要在不同的移动设备上测试我们开发的前端应用是否正常工作,比如iOS设备和Android设备.我用的工作笔记本电脑又是Lenovo的,安装的是Windows操作系统. 有的时候一个开发好 ...

  9. jquery批量绑定click事件

    jquery批量绑定click事件: var selects = $(".public_select dd ul li"); debugger; /*$(".public ...

随机推荐

  1. Linux多线程编程(不限Linux)转

    ——本文一个例子展开,介绍Linux下面线程的操作.多线程的同步和互斥. 前言 线程?为什么有了进程还需要线程呢,他们有什么区别?使用线程有什么优势呢?还有多线程编程的一些细节问题,如线程之间怎样同步 ...

  2. 【HDOJ】3652 B-number

    终于自己写出来一道数位DP啊.继续训练DP. /* 3652 */ #include <iostream> #include <sstream> #include <st ...

  3. Android开发UI之个性化控件之Menu

    MenuDrawer 滑出式菜单,通过拖动屏幕边缘滑出菜单,支持屏幕上下左右划出,支持当前View处于上下层,支持Windows边缘.ListView边缘.ViewPager变化划出菜单等. 项目地址 ...

  4. poj3368Frequent values(RMQ)

    http://poj.org/problem?id=3368 追完韩剧 想起这题来了 想用线段树搞定来着 结果没想出来..然后想RMQ 想出来了 算是离散吧 把每个数出现的次数以及开始的位置及结束的位 ...

  5. Configurataion Printer(基于全新2.2.0API)

    Configurataion Printer import java.util.Map.Entry; import org.apache.hadoop.conf.Configuration; impo ...

  6. 对 Azure Backup 的常见配置问题进行故障排除

    Giridhar Mosay云 + Enterprise 项目经理 这篇博客文章有助于解决 Microsoft云备份解决方案(即 Azure Backup)的常见配置问题.客户通常会在安装或注册 ...

  7. c# 提取word文件中的图片问题

    最近遇到一个项目就是要从一份word中提取出所有的图片信息,功能看起来不是很难,只要使用office自带的Microsoft.Office.Interop.Word就可以解决问题.网上也有不少的文章来 ...

  8. struct ifconf和struct ifreq,获取网线插入状态

    这两天看用C获取当前网口的插入网线状态的程序,遇见了这两个不熟悉的结构体,看了头文件中的说明和详细. struct ifreq 这个结构定义在include/net/if.h,用来配置ip地址,激活接 ...

  9. 关于Windows Azure的常见问题-注册问题FAQ

    注册问题 手机验证出现问题怎么办? 当您输入发送到手机里的验证码到文本框时,您需要点击右侧的“验证代码”的按钮,待按钮转变为“绿色对勾”的标识后,您可以点击“继续”来完成余下的注册步骤.每一个手 机号 ...

  10. Android SharedPreference 数据存储

    参考:http://www.cnblogs.com/friends-wf/p/4835818.html 应用开发过程中,数据存储几乎是肯定会遇到的问题,根据要存储的数据类型和数量,可以选择合适的存储方 ...