<!DOCTYPE html>
<html lang="en"><head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-1.11.1.min.js"></script> <script> $(function(){ $("#btn").click(function(e){ //阻止冒泡 e.stopPropagation(); $("div").show(); //显示之后给document绑定click事件。给click绑定命名空间.bl $(document).on("click.bl",function(){ //测试click是否绑定 alert("1"); $("div").hide(); //隐藏div后通过click命名空间.bl解除document click事件。 $(document).off(".bl"); }) }); $("div").on("click",function(e){ //阻止冒泡 e.stopPropagation(); }) }) </script> <style> *{ margin: 0; padding: 0; } div{ width: 200px; height: 200px; background-color: darkblue; margin: 100px; } </style></head><body> <input type="button" id="btn" value="显示" /> <div style="display: none;"></div></body></html>