點選顯示，再次點選除自身外隱藏效果
阿新 • • 發佈：2018-12-12
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> #box{ width: 100px; height: 100px; background: #ccc; display: none; } </style> <body> <div id="box"> demo </div> <button id="btn">展示</button> </body> <script> var btn=document.getElementById('btn'); var box=document.getElementById('box'); btn.onclick=function (e) { box.style.display='block'; e.stopPropagation(); } box.onclick=function (e) { e.stopPropagation(); } document.onclick=function () { box.style.display='none'; } </script> </html>
重點是明白點選事件是冒泡的，從裡向外依次擴散。所以只需要在點選裡層元素，比如button和box元素本身的時候要用stopPropagation阻止事件繼續向外擴散。而在點選document的時候，它已經不會繼續向外擴散，因為document本身就是最外層了。 其實就是個事件冒泡的考察。當然對應的還是事件捕獲和冒泡正好相反。