轉自https://blog.csdn.net/yimawujiang/article/details/86496936
問題：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必須要在文檔后面寫，在head寫documnet.body為null document.body.addEventListener('click', function() { outside=true },true) document.body.addEventListener('click', function() { if(outside){ alertBox.style.display = 'none' } }) </script>