<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="view" content="width=device-width;user-scalable=no;initial-scale=1.0">
<style>
div{
width:120px;
background-color:blue;
}
#div{
width:100px;
height:100px;
background-color:gray;
color:blue;
margin:10px;
}
#hi{
border:1px solid red;
}
</style>
</head>
<body>
<script>
function hi(e) {
alert(e.target.id);
// alert(event.bubbles);
//#hi这个元素调用了阻止冒泡，包容它的父元素#div等两个div的点击事件不会响应，只会alert一次
e.stopPropagation();
}
function div(e) {
//#div这个元素被点击后，会将点击事件冒泡到最外层父元素div，由于父元素也定义了点击事件，所以会alert两次，并且id为div
alert(e.target.id);
// alert(event.bubbles);
//e.stopPropagation();
}
</script>
<div onclick="div(event)" ><div onclick="div(event)" id="div" ><span onclick="hi(event)" id="hi" >hi event</span></div></div>
</body>
</html>
原文：http://www.cnblogs.com/eternaluve/p/4732802.html