主要思想：冒泡事件
事实上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的区别参考文献：/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>
参考文献：/lsx19981201/article/details/86670609
