阻止事件冒泡

什么是事件冒泡？

要知道怎么阻止事件冒泡，首先我们来看一下什么是事件冒泡。

事件冒泡即在一个对象上触发某类事件（比如单击事件），如果该对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，然后向该对象的父级对象传播（如果没有定义此事件的处理程序，那么这个事件会直接向父级对象传播），直至它到达了对象层次的最顶层即document对象（有些浏览器是window），父级对象所有同类事件都被激活。

  下面通过一个小例子来解释 代码如下:

比如上面这个页面: ID 分别为"one","two","three"的三个标签呈嵌套关系，而且他们都有各自的click事件。

 运行页面，点击“百度一下”,会依次弹出：three ----> two ----> one ---->最后跳转到百度。 这就是事件冒泡，本来我只点击ID为 three 的标签，但是却还执行了三个alert操作。所以事件冒泡过程（以标签ID表示）：three ----> Two ----> One。从最里层冒泡到最外层。

 如何阻止事件冒泡? 

 1、event.stopPropagation(); 

代码如下:

再点击“百度一下”，会弹出：three ,然后跳转到百度。不会再附加弹出 two、one。

2、return false; 

代码如下:

点击“百度一下”，会弹出：three ，不会弹出 two ，one。 同时也不会跳转。

 总结：

由此可以看出：

 1.event.stopPropagation(); 事件处理过程中，阻止了事件冒泡，但不会阻击默认行为（它就执行了超链接的跳转） 

2.return false; 事件处理过程中，阻止了事件冒泡，也阻止了默认行为（比如刚才它就没有执行超链接的跳转）

补充：

阻止默认事件： event.preventDefault(); 

代码如下:

 $(function(){ $("#three").click(function(event){ event.preventDefault(); }); });

再点击“百度一下”，会弹出：three ，two ，one。 但也不会跳转。它的作用是：事件处理过程中，不阻止事件冒泡，但阻止默认行为。