场景: 在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. ios 软键盘弹出布局被顶上去 已解决

          document.body.addEventListener('focusout', () => {             //软键盘收起的事件处理             set ...

  2. 题解【洛谷P1967】[NOIP2013]货车运输

    题面 题解 注意到有一些限重很低的边不会被走到. 于是考虑建一棵最大生成树,在生成树上寻找答案. 设\(f[i][j]\)表示\(i\)的\(2^j\)级祖先,\(w[i][j]\)表示\(i\)到\ ...

  3. HTML5使用JavaScript控制<audio>音频的播放

    1.播放音乐最简单的样例 <audio controls> <source src="horse.mp3" type="audio/mpeg" ...

  4. vue mvvm原理与简单实现 -- 上篇

    Object.defineProperty介绍-- let obj = {}; Object.defineProperty(obj,'school',{ configurable : true, // ...

  5. JS高级---作用域,作用域链和预解析

    作用域,作用域链和预解析     变量---->局部变量和全局变量, 作用域: 就是变量的使用范围   局部作用域和全局作用域 js中没有块级作用域---一对括号中定义的变量,这个变量可以在大括 ...

  6. 快速排序 QuickSort (C++迭代,递归)

    /* * QuickSort.h * 快速排序(将每一个元素转换为轴点元素) * Created on: 2020年2月12日 * Author: LuYonglei */ #ifndef SRC_Q ...

  7. Virtual Judge POJ 3278 Catch That Cow

    #include<iostream> #include<cstdio> #include<cstring> #include<cmath> #inclu ...

  8. 后缀数组 poj 3415

    首先,height[i]-k+1  很好理解把,他是说明目前这对后缀中不小于k的公共子串个数. 题解说用单调栈维护,为什么要用单调栈维护呢?因为时间复杂的可以大大降低. 怎么个降低方法呢? 在之前学习 ...

  9. python2.7 字符处理小节

    unicode是字符集 utf-8,gbk是编码方式,将字符集编码为机器识别的字节码 #encoding: utf-8 s = "中文" #unicode的utf-8编码,\xE4 ...

  10. Makefile的编写及四个特殊符号的意义@、$@、$^、$

    https://www.cnblogs.com/sky-heaven/p/9450435.html Makefile一般的格式是: target:components rule 一.@ 这个符串通常用 ...