<!DOCTYPE html>
<html lang="en">
<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>
<p id="out">
<p id="in"></p>
</p>
<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>在这段代码中为何点击子元素后父元素也会变色呢？在子元素上已经设置了阻止事件捕获啊？
因为点了子元素同时也点了父元素。只想子元素变色可在子元素启用事件传播，在父元素处理事件。
事件捕获的传播顺序是从父元素到子元素，所以你如果指定父元素在捕获阶段监听的话，是肯定会触发父元素事件处理行为的……
现在一般很少用事件捕获监听(印象里事件捕获是IE用的事件模型，后来被标准向下兼容了)，第三个参数都写
false，然后比如题主这样的需求，在子元素的事件处理里边写个禁止冒泡就行了。addEventListener的第三个参数不是用来阻止事件捕获的
第三个参数是来控制事件是在捕获阶段或冒泡阶段执行
在你这个demo里面，当点击子元素时，会产生一个点击事件
事件会按照
捕获：window→document→html→body→#out→#in
执行：#in
冒泡：#in→#out→#body→#html→#document→#window
这样的顺序完成生命周期
你给#out的事件第三个参数设置的ture，那么当点击事件捕获到#out时，就会触发#out的点击事件
想要实现你的要求