问题：js实现点击按钮时显示弹框，点击按钮及弹框以外的区域时隐藏弹框？
- 方案一：这个问题通常的办法是使用阻止事件冒泡来实现，代码如下（省略css）：
<body> <button id="btn1" onclick="alertBoxFn();stopBubble()">打开弹窗</button> <div id="alertBox" onclick="stopBubble()"></div> </body> <script> function alertBoxFn(e) { alertBox.style.display = "block"; } function stopBubble(e){ var e=e||window.event; e.stopPropagation() } document.body.addEventListener('click', function() { alertBox.style.display = 'none' }) </script>
但这有一个弊端，就是如果页面上需要有多个按钮分别控制多个弹框，需求是点击按钮1时显示弹框1，点击按钮2时显示弹框2，同时隐藏弹框1。但结果却是点击按钮2时，按钮1并不会隐藏。这是因为按钮2阻止了点击事件的冒泡，导致body元素的点击事件并没有被触发。于是，这里我们不能再使用阻止事件冒泡的方法了。
- 方案二：声明一个变量用来判断鼠标是否点击的是按钮或弹框。代码如下（省略css）：
<body> <button id="btn" onclick="alertBoxFn()">打开弹窗</button> <div id="alertBox" onclick="outside=false"></div> </body> <script> var outside=true function alertBoxFn(e) { outside=false alertBox.style.display = "block"; } document.body.addEventListener('click', function() { outside=true },true) document.body.addEventListener('click', function() { if(outside){ alertBox.style.display = 'none' } }) </script>
如果是在vue的项目中，可以使用插件v-click-outside-x；