今天做了个手机页面，点击某个按钮->弹出菜单，再点击菜单以外的任意位置->关闭菜单，在其他浏览器里面没有问题，但是在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，不然菜单要被关闭
})
 

关于IOS浏览器：document,body的click事件触发规则的更多相关文章

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

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

  2. [ios]IOS的AppDelegate方法中的事件触发调用 以及 关闭 ios应用程序

    IOS的AppDelegate方法中的事件触发调用 参考:http://blog.sina.com.cn/s/blog_a573f7990101bphp.html //当应用程序将要进入非活动状态执行 ...

  3. 手机浏览器下IScroll中click事件

    产品的h5页面几乎都使用了iscroll插件,如果a标签在iscroll里,在部分手机浏览器中会出现无法点击的情况,不管是绑定click事件还是使用a标签的href属性.href属性偶尔还会能点击,c ...

  4. click事件触发也有失灵的时候？

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

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

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

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

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

  7. IOS的Safari浏览器中，点击事件失效的原理及解决办法

    这里做了事件委托,简单区分一下[目标元素]和[代理元素],为后续论述理解做铺垫. [目标元素]:实际希望点击的元素,可以是任意标签. [代理元素]:代替[目标元素]触发点击事件的元素,有可能是目标元素 ...

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

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

  9. 移动端click事件延迟300ms的原因以及解决办法

    这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点 ...

随机推荐

  1. No plugin found for prefix 'mybatis-generator' in the current project

    http://blog.csdn.net/you23hai45/article/details/50792430 1.错误描述 F:\workspaces\Mybatis>mvn mybatis ...

  2. Linux中杀不死的进程

    前段时间,一哥们,去杀Linux服务器的进程,发现kill命令失灵了,怎么杀都杀不死. 然后上网查了下资料,原来是要被杀的进程,成为了僵尸进程. 僵尸进程的查看方法: 利用命令ps,可以看到有标记为Z ...

  3. XStream xml 解析框架使用笔记

    1. xml的标签可以映射为类.类成员变量 2. 有子标签的标签映射为类,没有子标签的便签映射为类成员变量 3. 类名.类成员变量名如与标签名不一致需要通过注解或代码设置别名 // 类名 @XStre ...

  4. Redis基本信息

    1.Windows安装地址 https://github.com/MSOpenTech/redis/releases 2.命令行方式运行 执行redis-cli.exe 3.待续

  5. 其原因可能是堆被损坏，这说明 100BloodCellSegTest.exe 中或它所加载的任何 DLL 中有 Bug。

    这个问题可能是内存空间释放了两次,比如使用cvLoadImage函数时IplImage* img = cvLoadImage(buf.c_str(),1);,注意要释放内存,但不要释放了两次cvRel ...

  6. 从ord()中对Unicode编码的理解

    刚开始学习编程的时候,老对字符串编码的理解模模糊糊.也一直看这方便的资料,今天在看Dive in python时,突然有了新的理解(不知道是否正确). Python有个built-in函数ord(), ...

  7. 相机标定简介与MatLab相机标定工具箱的使用（未涉及原理公式推导）

    相机标定 一.相机标定的目的 确定空间物体表面某点的三维几何位置与其在图像中对应点之间的相互关系,建立摄像机成像的几何模型,这些几何模型参数就是摄像机参数. 二.通用摄像机模型 世界坐标系.摄像机坐标 ...

  8. JS实现常用排序算法—经典的轮子值得再造

    关于排序算法的博客何止千千万了,也不多一个轮子,那我就斗胆粗制滥造个轮子吧!下面的排序算法未作说明默认是从小到大排序. 1.快速排序2.归并排序3.冒泡排序4.选择排序(简单选择排序)5.插入排序(直 ...

  9. C#: using JsonReader avoid Deserialize Json to dynamic

    namespace Test { using Microshaoft; using Test.Models; using Newtonsoft.Json; using System; using Sy ...

  10. 虚拟机下CentOS 配置IP地址的三种方法

    1.自动获取IP地址(我不是用的这种方法,不做过多介绍) 虚拟机使用桥接模式,相当于连接到物理机的网络里,物理机网络有DHCP服务器自动分配IP地址. #dhclient 自动获取ip地址命令 #if ...