<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload= function() {
document.getElementById('hr_three').onclick=function(event) {
event.stopPropagation();
alert('我是最里层！');
};
}
</script>
</head>
<body>
<div id="divOne" onclick="alert('我是最外层');" style="border:1px solid gray;padding:8px;">
<div id="divTwo" onclick="alert('我是中间层！')" style="border:1px solid red;padding:8px;">
<a id="hr_three" href="http://www.baidu.com" mce_href="http://www.baidu.com">点击我</a>
</div>
</div>
</body>
</html>
通过以上方式我们可以处理，当我们在子节点和父节点上都注册同一类事件时，子类事件的触发不会影响到父类事件，冒泡是由内向外的
什么是JS事件冒泡？：
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。
以下代码就会一直向上冒泡：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*window.onload= function() {
document.getElementById('hr_three').onclick=function(event) {
event.stopPropagation();
alert('我是最里层！');
};
}*/
</script>
</head>
<body>
<div id="divOne" onclick="alert('我是最外层');" style="border:1px solid gray;padding:8px;">
<div id="divTwo" onclick="alert('我是中间层！')" style="border:1px solid red;padding:8px;">
<a id="hr_three" href="http://www.baidu.com" mce_href="http://www.baidu.com" onclick="">点击我</a>
</div>
</div>
</body>
</html>
写道
http://blog.sina.com.cn/s/blog_a322154901015qkk.html
相关推荐
javascript事件冒泡,事件捕获和事件委托详解 1、事件冒泡：在javascript事件传播过程中，当事件在一个元素上出发之后，事件会逐级传播给先辈元素，直到document为止，有的浏览器可能到window为止。并不是所有的...
本段代码演示了如何使用JavaScript取消HTML事件的冒泡，即当后代元素的事件被触发时，祖先元素的相同事件也会被触发。代码中，页面包含一个div元素和一个嵌套在其中的span元素，分别设置了单击响应函数。当单击span...
JavaScript事件冒泡示例，简单，明了，实用。
一、什么是事件冒泡 在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个...
NULL 博文链接：https://zlotus.iteye.com/blog/1094308
然而，在今天一些大型的WEB交互项目中，比如大型的WebGame项目，JavaScript事件冒泡影响是值得重视的。本文通过一个简单的例子来讲解JavaScript事件冒泡及使用注意事项。 如果你对JavaScript事件冒泡还没有什么印象...
一种解决事件冒泡的方法，有较好的浏览器兼容性，具体思路参见文档： http://blog.csdn.net/ivyandrich/article/details/22041933
这篇文章主要介绍了JavaScript事件冒泡机制原理实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 DOM事件流（event flow ）存在三个阶段：事件捕获阶段...
阻止滚动条事件mousewheel冒泡,当网页内部元素滚动条到顶或底时不触发浏览器窗口的滚动条事件。
javascript 中事件冒泡和事件捕获机制的详解 二者作用：描述事件触发时序问题 事件捕获：从document到触发事件的那个节点，即自上而下的去触发事件—由外到内 事件冒泡：自下而上的去触发事件—由内到外 绑定事件...
主要向大家介绍了javascript事件冒泡，以及javascript阻止事件冒泡的实现代码，感兴趣的朋友可以参考一下
JS 事件冒泡 示例代码，大家可以参考下。
js事件冒泡实例：摘的网上的例子，但是他写的有错误，自己改正了下，已验证通过，感兴趣的朋友可以参考下哈
本文实例讲述了JavaScript事件冒泡与事件捕获。分享给大家供大家参考，具体如下： 1、事件冒泡 在一个对象上触发某类事件，如onclick事件等，在其祖先节点上也会依次触发该事件。 <body onclick=alert('body...
主要介绍了Javascript 事件冒泡机制详细介绍的相关资料,需要的朋友可以参考下
本文主要介绍了JS中绑定事件顺序（事件冒泡与事件捕获区别）。具有很好的参考价值，下面跟着小编一起来看下吧
js事件冒泡 概念：事件冒泡（event bubbling），即事件开始时由最具体的元素（文档中嵌套层次最深 的那个节点）接收，然后逐级向上传播。也就是说我点击子元素，如果父级元素也有监听点击事件，也会被触发到。 ...