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

—

by

FeanLau
in

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