<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>点击其它地方关闭DIV</title> </head> <body> <input type="text" value="" id="tf"/> <div style="400px; height:200px;border:1px solid #000;display:none" id="con"> <p>1111</p> <p><span>2222</span></p> <p><a href="#">3333</a></p> </div> <script src="./jquery.js"></script> <script> $('#tf').click(function(e){ $('#con').show(); stopBubble(e); $(document).click(function(){ $('#con').hide(); //$(document).click=null; }); }); $('#con').click(function(e){ //只阻止了向上冒泡，而没有阻止向下捕获，所以点击con的内部对象时，仍然可以执行这个函数 stopBubble(e); }); //阻止冒泡函数 function stopBubble(e){ if(e && e.stopPropagation){ e.stopPropagation(); //w3c }else{ window.event.cancelBubble=true; //IE } } </script> </body> </html>