关于IOS浏览器：document,body的click事件触发规则
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于IOS浏览器：document,body的click事件触发规则相关的知识，希望对你有一定的参考价值。
今天做了个手机页面，点击某个按钮->弹出菜单，再点击菜单以外的任意位置->关闭菜单，在其他浏览器里面没有问题，但是在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浏览器的window、document、body并不接受click事件，按钮和链接才接受click事件
我们做一个比喻来理解这个事件是怎么运作的：
屏幕被点击后，系统会发送一个事件公告(click),链接和按钮收到这个公告后会处理相应的行为（比如打开个新页面，提交表单，用户绑定的其他行为）
window、document、body并不会搭理这个公告，跟没看到似的，自然也就没有弹窗出现
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事件触发规则的主要内容，如果未能解决你的问题，请参考以下文章
IE/FF/Chrome下document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight
关于document.body.scrollTop 的谷歌，火狐浏览器兼容问题
iOS document.body.scrollTop 在 iframe 中始终为 0