首先了解什么是事件冒泡什么是事件捕获
注:图片来自博客http://www.cnblogs.com/Chen-XiaoJun/p/6210987.html
实例代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件流</title>
<style type="text/css">
#content{width: 150px;height: 150px;background-color: red;}
#btn{width: 80px;height: 80px;background-color: green;}
</style>
</head>
<body>
<div id="content">content
<div id="btn">button</div>
</div>
<script type="text/javascript">
var content = document.getElementById("content");
var btn = document.getElementById('btn');
btn.onclick = function(e){
alert("btn");
// 阻止事件冒泡
var ev=e?e:window.event;//兼容IE写法,window.event获取IE时间源
window.event?window.event.cancelBubble=true:e.stopPropagation();
};
content.onclick = function(){
alert("content");
};
document.onclick = function(){
alert("document");
};
document.oncontextmenu = function(e){
// alert("document");
// 阻止默认事件
if(e.preventDefault){
e.preventDefault();
}else{
window.event.returnValue = false;
return false;
}
}
// 事件冒泡btn——>content——>document
</script>
</body>
</html>