什么是事件冒泡?
要知道怎么阻止事件冒泡,首先我们来看一下什么是事件冒泡。
事件冒泡即在一个对象上触发某类事件(比如单击事件),如果该对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,然后向该对象的父级对象传播(如果没有定义此事件的处理程序,那么这个事件会直接向父级对象传播),直至它到达了对象层次的最顶层即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。 但也不会跳转。它的作用是:事件处理过程中,不阻止事件冒泡,但阻止默认行为。