主要思想：冒泡事件
事实上stopPropagation()和cancelBubble的作用是一样的，都是用来阻止浏览器默认的事件冒泡行为。
不同之处在于stopPropagation()属于W3C标准，试用于Firefox等浏览器，但是不支持IE浏览器。相反cancelBubble不符合W3C标准，而且只支持IE浏览器。所以很多时候，我们都要结合起来用。不过，cancelBubble在新版本chrome,opera浏览器中已经支持。
语法：e.stopPropagation(); || e.cancelBubble = true;
参数e：表示事件传递的参数，代表事件的状态。兼容写法：var e = e || window.e
stopPropagation()和cancelBubble的区别参考文献：https://blog.csdn.net/iammarrio/article/details/52869935
实现js点击下拉列表按钮，显示，点击其他地方（包括下拉按钮）隐藏下拉列表：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> #pop { border: #000; background-color: #CCC; position: absolute; left: 0px; top: 50px; width: 200px; height: 500px; display: none; } #btn { color: #f00; } </style> </head> <body> <button id="btn">打开层</button> <div>aa</div> <div>aa</div> <div id="pop"> 浮层，点击这个浮层以外的区域/按钮，都可以隐藏这个浮层 <p> <a href="javascript:;">最主要的是点这个div里面的链接，div照样不隐藏</a> </p> </div> </body> </html> <script type="text/javascript"> // 封装获取元素的语法 function $(id) { return document.getElementById(id); } window.onload = function() { document.onclick = function(e) { $("pop").style.display = "none"; } // var pop = document.getElementById("pop"); $("btn").onclick = function(e) { if (pop.style.display == "block") { //对当前状态的判断 $("pop").style.display = "none"; } else { $("pop").style.display = "block"; } var e = e || window.e; stopFunc(e); } // 用来阻止点击显示的区域隐藏 $("pop").onclick = function(e) { var e = e || window.e; stopFunc(e); } } function stopFunc(e) { /*标准浏览器有效 IE不行 e.stopPropagation();*/ /*没有兼容性问题阻止事件冒泡e.cancelBubble = true;*/ e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true; } </script>参考文献：https://blog.csdn.net/lsx19981201/article/details/86670609