场景： 在ios上（包括iPhone和ipad）

　　　给window ，html，document，body绑定click事件，点击不会触发

　　　由于ios浏览器都用的safari内核，所以ios浏览器全部中枪

解决方案：

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

IOS上给body和html绑定click事件的坑的更多相关文章

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

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

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

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

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

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

  4. jquery批量绑定click事件

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

  5. google跟踪代码管理器gtm无法给相同class元素绑定click事件埋点解决

    Google 跟踪代码管理器是一个跟踪代码管理系统 (TMS),可以帮助您快速轻松地更新网站或移动应用上的跟踪代码及相关代码段(统称为“代码”).将一小段跟踪代码管理器代码添加到项目后,您可以通过网页 ...

  6. jQuery-介绍 加载 选择器 样式操作 属性操作 绑定click事件

    jQuery - 介绍 加载 选择器 样式操作 属性操作 绑定click事件 注意:以下部分问题不能实现效果,因该是单词拼写错误(少个t)或者没有加引号(“swing”)... jquery介绍 jQ ...

  7. JS: javascript 点击事件执行两次js问题 ,解决jquery绑定click事件出现点击一次执行两次问题

    javascript 点击事件执行两次js问题 在JQuery中存在unbind()方法,先解绑再添加点击事件,解决方案为: $(".m-layout-setting").unbi ...

  8. jquery单选框radio绑定click事件实现和是否选中的方法

    使用jquery获取radio的值,最重要的是掌握jquery选择器的使用,在一个表单中我们通常是要获取被选中的那个radio项的值,所以要加checked来筛选,比如有以下的一些radio项: 1. ...

  9. jquery单选框radio绑定click事件实现方法

    本文实例讲述了jquery单选框radio绑定click事件实现方法.分享给大家供大家参考. 具体实现方法如下: 复制代码代码如下: <html><head><title ...

随机推荐

  1. HTML-表格-基础表格

      主要内容: HTML表格 基本语法和结构: 案例: border用在table标签里面,表示边框的. th标签是加粗,width是宽度,表格宽度用在table里面.: caption用在table ...

  2. vue学习指南：第十二篇(详细) - Vue的 路由 第二篇 ( 路由按需加载(懒加载))

    各位朋友 因 最近工作繁忙,小编停更了一段时间,快过年了,小编祝愿 大家 事业有成 学业有成 快乐健康 2020开心过好每一天.从今天开始 我会抽时间把 Vue 的知识点补充完整,以及后期会带给大家更 ...

  3. ReLU(inplace=True),这里的inplace=true的意思

    ReLU(inplace=True),这里的inplace=true的意思 待办 inplace=True means that it will modify the input directly, ...

  4. 棋盘划分问题中4的k次方减一是三的倍数

    1.数学归纳法(万物皆可数学归纳) ①当n=1时:4-1=3(是三的倍数) ②假设n-1成立证明n成立:4n-1=4n-1*(4-1)+4n-1-1 =3*4n-1+(4n-1-1) 所以4n-1%3 ...

  5. pytest学习3-断言

    断言: 一个标准的用例都包含了断言,编写pytest自动化脚本的时候,也需要设置断言 pytest常用断言比较大小与是否相等.是否包含.验证boolean 例子一: 验证是否相等: import py ...

  6. IMM设置静态ip,安装系统

    IMM设置静态ip,安装系统 设置ip: System Setting->Integrated Management Module->Network configuration 修改后选择 ...

  7. 【转】Git常用命令指南

    1.git init 初始化一个Git仓库,git init –bare example.git创建一个裸仓,即没有工作区的git仓库.2.添加文件到Git仓库,分两步:git add <fil ...

  8. HTML学习（6）段落

    HTML段落使用<p>标签定义,浏览器会自动地在段落的前后添加空行. 如果不希望产生空行,可以使用<br />换行标签. 在元素内容中,连续的空格会被浏览器认格式化为一个空格, ...

  9. input file弹出框选择文件后缀限制

    在页面选择文件时的弹出框默认显示的是所有类型的文件,有时候文件太多不好选择,我们就要过滤掉不想展示的文件,这是需要用到input的accept属性,只有在type="file"才有 ...

  10. pycharm开发flask指定ip、端口无效

    原因分析 是因为使用了pycharm的版本的问题.并不是flask框架本身的问题(不管你是如何设置的flask配置,通过加载config也好,还是通过run的时候传入形参也好,均不影响) 可以很明显的 ...