<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#out{
width: 500px;
height: 500px;
background: red;
position: relative;
}
#in{
width: 200px;
height: 200px;
background: green;
position: absolute;
}
</style>
</head>
<body>
<div id="out">
<div id="in"></div>
</div>
<script type="text/javascript">
var out = document.getElementById("out");
var i = document.getElementById("in");
out.addEventListener('click',a,true);
i.addEventListener('click',b,false);
function a(){
out.style.backgroundColor = 'black';
}
function b(){
i.style.backgroundColor = 'blue';
}
</script>
</body>
</html>
在这段代码中为何点击子元素后父元素也会变色呢?在子元素上已经设置了阻止事件捕获啊?
相关分类