点击div之外的地方就隐藏该div
Posted 你七啊？
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了点击div之外的地方就隐藏该div相关的知识，希望对你有一定的参考价值。
效果：点击弹窗外任意一点，取消显示弹窗；这也是一个常用的效果
源码demo：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script> <style type="text/css"> #div1{ width: 200px; height: 200px; border:1px solid black; border-radius: 5px; display: none; } </style> </head> <body> <button onclick="showdiv()">点击显示弹窗</button> <div id="div1">点击弹窗大小外任意一点隐藏弹窗</div> <script type="text/javascript"> function showdiv(){ $("#div1").show(); $(document).one("click", function() { //对document绑定一个影藏Div方法 $("#div1").hide(); }); event.stopPropagation();//阻止事件向上冒泡 } $("#div1").click(function(event) { event.stopPropagation(); //阻止事件向上冒泡 }); </script> </body> </html>
以上是关于点击div之外的地方就隐藏该div的主要内容，如果未能解决你的问题，请参考以下文章
点击div和某些控件之外的地方隐藏div，点击div不隐藏。对象 click和document click冲突有关问题