今天做了个手机页面，点击某个按钮->弹出菜单，再点击菜单以外的任意位置->关闭菜单，在其他浏览器里面没有问题，但是在IOS浏览器中并不会关闭。

网上解决这个bug的帖子很多，这篇帖子主要是讲原理，这里写个简单的代码，大家可以复制到自己页面中去实验：

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>

</head>

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>

<style>

*{min-height:100px; line-height:100px;}

body{ background:#ddd;}

a,input{display:block;}

div{background:#9CF;}

</style>

<body>

    <a href="#" >链接</a>

    <input type="button" value="按钮"/>

    <div>div或span等</div>

</body>

</html>

<script>

$("body").bind("click",function(){

    alert("body 被点击")

})

</script>

上面这段代码在其他浏览器里面没有问题，在IOS的浏览器中，点击链接和按钮都会有弹窗，但是点击其他区域却没有。

原因是因为IOS浏览器的按钮和链接才响应click事件，其他标签不响应，所以点击链接和按钮之外的其他地方并不会把click事件冒泡到body上。

我们做一个比喻来理解这个事件是怎么运作的：

屏幕被点击后，系统会发送一个事件公告(click),链接和按钮收到这个公告后会处理相应的行为（比如打开个新页面，提交表单，用户绑定的其他行为）
window、document、body、div并不会搭理这个公告，跟没看到似的，自然也就没有弹窗出现
body只接受内部的冒泡事件，点击按钮后触发了按钮的click事件，然后按钮会告诉自己的上级（body）：老大，我被点击了，
body会说：好的，我会处理的，这时候弹窗就出来了。
body里面的div，span等标签默认是不会理睬click事件公告的，但是我们可以开启他，开启后他们就跟按钮一样，可以接受click事件，并汇报给上级。
开启方法：给标签绑定一个任意事件↓

1.HTML标签中添加事件属性

<div onMouseOver>div或span等</div>

<div onClick>div或span等</div>

<div onKeyDown>div或span等</div>

2.用js或者jquery绑定一个事件

$("body div").bind("click",function(){})

所以最后我们的弹出菜单可以这样写

/*给body里面的任意元素绑定事件，让这些标签能接受click事件*/
$("body>*").bind("click",function(){});

$("#button").bind("click",function(e){/*给按钮绑定点击事件*/
    $("#menu").show();//按钮点击后显示菜单
    
    $("body").one("click",function(){/*菜单显示后：给body绑定点击事件，执行一次后自动删除这个绑定*/
        $("#menu").hide();//body收到click事件后关闭菜单
    });
    e.stopPropagation();//停止冒泡，按钮被点击后不告诉body，因为click事件如果冒泡到body会关闭菜单。

})
$("#menu").bind("click",function(e){/*给菜单绑定点击事件*/
　　 e.stopPropagation();//停止冒泡，菜单被点击后不告诉body，不然菜单要被关闭
})
 

click事件触发也有失灵的时候？的更多相关文章

  1. 关于IOS浏览器：document,body的click事件触发规则

    今天做了个手机页面,点击某个按钮->弹出菜单,再点击菜单以外的任意位置->关闭菜单,在其他浏览器里面没有问题,但是在IOS浏览器中并不会关闭. 网上解决这个bug的帖子很多,这篇帖子主要是 ...

  2. checkbox：click事件触发文本框显示隐藏

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. checkbox：click事件触发span元素内容改变

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 隔离click事件

    有一些应用,不需要我们自己的定义的click函数,例如: $(document).on('click', '#inp', function(e){ alert('hello world!'); }); ...

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

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

  6. 移动端web，tap与click事件

    一.tap与click的区别 两者都会在点击时系统自动触发,但是在手机WEB端,click会有 200~300 ms.延迟来自判断双击和长按,因为只有默认等待时间结束以确定没有后续动作发生时,才会触发 ...

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

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

  8. 关于JS 事件冒泡和onclick,click,on()事件触发顺序

    今天在给JQgrid中的标签添加click事件的时候,发现一个问题. JQgrid的table中,点击任何位置,都会勾选点击行的checkbox,而我希望在点击我的标签的时候,不要勾选checkbox ...

  9. 如何用按钮的click事件去触发a标签的click事件

    在jQquery中,可以用如下方式触发input.a标签的click事件: <input id="my_input" /> <a id="my_a&qu ...

随机推荐

  1. 三维重建PCL：点云单侧面正射投影

    终于把点云单侧面投影正射投影的代码写完了,为一个阶段,主要使用平面插值方法,且只以XOY平面作为的正射投影面.有些凑合的地方,待改进. 方法思路:使用Mesh模型,对每一个表面进行表面重建.借助Ope ...

  2. UVALIVE6886 Golf Bot (FFT)

    题意:打高尔夫 给你n个距离表示你一次可以把球打远的距离 然后对于m个询问 问能否在两杆内把球打进洞 题解:平方一下就好 注意一下x0的系数为1表示打一杆 才发现数组应该开MAXN * 4 之前写的题 ...

  3. mybatis中resultMap引发的吐血bug

    简单的讲: 问题背景:如果在写mybatis中的resultMap时,不下心将resultMapde id写成映射接口的名字,会发生什么? 结论:单元测试进度条卡住但不报错, Tomcat运行不报错, ...

  4. 【阶梯报告】洛谷P3391【模板】文艺平衡树 splay

    [阶梯报告]洛谷P3391[模板]文艺平衡树 splay 题目链接在这里[链接](https://www.luogu.org/problemnew/show/P3391)最近在学习splay,终于做对 ...

  5. Python学习笔记（2）数值类型

    进制转换 int函数任意进制转换为10进制 第一个参数传入一个字符串,任意进制的,第二个参数传入对这个字符串的解释,解释他为几进制 hex oct bin转换进制为16 8 或者2进制 例题中石油87 ...

  6. Mysql Error Code: 1175. You are using safe update mode and you tried to update a table without a WHERE that uses a KEY column To disable safe mode

    今天用mysql workbench在更新数据的时候,出现了下面错误:15:52:39    update wp_posts set post_content = replace(post_conte ...

  7. 虚拟机下Linux网络配置

    之前配置好了linux系统,在网络这块我用的是桥接模式. 现在分享一下使用虚拟机桥接模式配置Linux网络的过程. 一.首先配置外网的本地Ip地址. 二.配置Linux 网络链接 1.打开linux网 ...

  8. str类型内置方法

    目录 str类型内置方法 用途 定义方式 常用操作和内置方法 优先掌握 需要掌握 了解 存一个值or多个值 有序or无序 可变or不可变 强化训练 str类型内置方法 用途 字符串数字.字母.下划线组 ...

  9. 51nod 1096 距离之和最小 1108 距离之和最小 V2

    [题解] 很显然在一条坐标轴上到各个点距离之和最小的点就是它们的中位数.怎么证明呢?我们假设现在找的某个点x左边有a个点,右边有b个点(a>b).我们把x向左移动d个单位,并保证x左边依然有a个 ...

  10. HDU 1085 多重背包转化为0-1背包问题

    题目大意: 给定一堆1,2,5价值的硬币,给定三个数表示3种价值硬币的数量,任意取,找到一个最小的数无法取到 总价值为M = v[i]*w[i](0<=i<3) 那么在最坏情况下M个数都能 ...