1、弹出框
<style> .mask { position: fixed; display: none; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,0,0,.6); } .mask .login { width: 500px; height: 350px; background: #fff; margin: 150px auto; } </style> <a href="#">登录</a> <div class="mask" id="mask"> <div class="login" id="login"> </div> </div> <script> var a = document.getElementsByTagName("a")[0]; var mask = document.getElementById("mask"); a.onclick = function(event) { mask.style.display = "block"; // 阻止冒泡 event = event || window.event; if (event || event.stopPropagation()) { event.stopPropagation(); } else { event.cancelBubble = true; } } document.onclick = function(event) { event = event || window.event; // 兼容获取触动事件时被传递过来的对象 var aaa = event.target?event.target:event.srcElement; if (aaa.id !== "login") { mask.style.display = "none"; } } </script>
冒泡事件：
cancalBubblt()和stopPropagation()：它们相同之处在于都是用来阻止浏览器默认的事件冒泡行为。不同之处在于stopPropagation（）属于W3C标准，适用于Firefox等浏览器，但不支持IE；cancelBubble不符合W3C标准，只支持IE，所以很多时候结合起来使用。
语法：e.stopPropagation（），e代表事件传递的参数，代表事件的状态。
jQuery中对冒泡和默认行为的阻止方法同样可以写成：
event.preventDefault()――> return false; event.stopPropagation()――> return false；
来源：博客园
作者：し7709
链接：https://www.cnblogs.com/L-xjco/p/11609849.html