在默认情况下,发生在一个子元素上的单击事件(或者其他事件),如果在其父级元素绑定了一个同样的事件,此时点击子元素,click事件会首先被子元素捕获,执行绑定的事件程序,之后会被父级元素捕获,再次激发一段脚本的执行,这就是所谓的“事件冒泡”。
看个例子:demo1
在通常情况下,我们只希望事件发生在它的目标而并非它的父级元素上,只需加个stopBubble方法,即可取消事件冒泡,代码如下:
- function stopBubble(e){
- // 如果传入了事件对象,那么就是非ie浏览器
- if(e&&e.stopPropagation){
- //因此它支持W3C的stopPropagation()方法
- e.stopPropagation();
- }else{
- //否则我们使用ie的方法来取消事件冒泡
- window.event.cancelBubble = true;
- }
- }
取消事件冒泡事件后,详见:demo2
现在你可能想知道,什么时候需要阻止事件冒泡?事实上,现在绝大多数情况下都可以不必在意它。但是当你开始开发动态应用程序(尤其是需要处理键盘和鼠标)的时候,就有这个必要了。
标签: 事件冒泡

[...] 提及事件冒泡,那么不得不提“阻止事件冒泡”这个概念,因为我们最经常处理的任务就在于如何阻止事件的冒泡,来避免一些不必要的麻烦,关于这点,由于在之前的文章中单独讨论过,在此不再赘述,详见:阻止事件冒泡 [...]