## JS事件冒泡 在一个对象上触发某类事件（如单击onclick事件），如果此对象定义了此事件的处理程序，此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。 ``` <div id="one" onclick="alert('最外层');"> 　 <div id="two" onclick="alert('中间层！')"> 　　　 <a id="three" href="http://www.baidu.com" onclick="alert('最里层！')">按钮</a> 　　</div> </div> ``` 运行页面，点击“按钮”,会依次弹出：最里层---->中间层---->最外层 ---->链接到百度 只点击ID为three的标签，执行了三个alert操作，这就是事件冒泡。事件冒泡过程是从最里层冒泡到最外层。 ## JS阻止默认事件和冒泡的写法 **阻止事件冒泡的兼容性写法** ``` function stopPropagation(e){ if(e && e.stopPropagation){ e.stopPropagation() }else{ window.event.cancelBubble = true; } } ``` **阻止事件默认行为** ``` function stopDefault(e){ if(e && e.preventDefault){ e.preventDefault(); }else{ window.event.returnValue = false; } } ``` ## JS阻止事件冒泡的三种方法 1. `event.stopPropagation();`  事件处理过程中，阻止了事件冒泡，但不会阻止默认行为 2. ` return false;`  事件处理过程中，阻止了事件冒泡，也阻止了默认行为 3. `event.preventDefault(); ` 事件处理过程中，不阻击事件冒泡，但阻击默认行为 **阻止事件冒泡** 1. `event.stopPropagation();`  事件处理过程中，阻止了事件冒泡，但不会阻止默认行为（它就执行了超链接的跳转） ``` function() { $("#three").click(function(event) { event.stopPropagation(); }); } ``` 2. ` return false;`  事件处理过程中，阻止了事件冒泡，也阻止了默认行为（它就没有执行超链接的跳转） ``` $(function() { 　$("#three").click(function(event) { 　　return false; 　}); }); ``` 3. `event.preventDefault(); ` 事件处理过程中，不阻击事件冒泡，但阻击默认行为（它只执行所有弹框，却没有执行超链接跳转） ``` function() { $("#three").click(function(event) { event.preventDefault(); }); } ``` 如果把`event.preventDefault(); `放在头部A标签的click事件中，点击“点击我”，会发现它依次弹出：我是最里层---->我是中间层---->我是最外层，但最后却没有跳转