在脱离文档流时可以有事件流吗？
首先我了解的事件流它是这样的：
- 事件捕获阶段。
- 处于目标阶段。
- 事件冒泡阶段。
文档流，在position定位时：
1、 static（静态定位）： 当我们没有指定定位方式的时候，这时默认的定位方式就是static，这种定位方式用margin来改变位置，对left、top、z-index等设置值无效，这种定位不脱离文档流；
2、relative定位（相对定位）： 这种定位是一种相对的定位，可以通过设置left、top、right、bottom等值，使得指定元素相对其正常的位置进行偏移，这种定位不脱离文档流；
3、absolute定位（绝对定位）： 这种定位通过设置top、right、bottom、left这些偏移值，相对于第一个父元素进行定位（这种定位通常设置父元素为relative定位来配合使用），在没有父元素的条件下，它的参照为body，该方式脱离文档流；
4、fixed（固定定位）：
这种定位方式是相对于整个文档的，只需设置它相对于各个方向的偏移值，就可以将该元素固定在页面固定的位置，通常用来显示一些提示信息，脱离文档流；
5、inherit定位： 这种方式规定该元素继承父元素的position属性值；
我用监听addEventListener，代码如下：
<html>
<head>
<meta charset="utf-8">
<title>事件流</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
font-size: 30px;
text-align: center;
cursor: pointer;
}
.A {
margin: 200px auto;
width: 160px;
line-height: 160px;
background-color: #0508db;
position: relative;
}
.a {
width: 80px;
line-height: 80px;
background-color: greenyellow;
position: absolute;
top: 40px;
left: 200px;
}
</style>
<script>
window.onload = function() {
A.addEventListener('click', function() {
console.log('父级A，(相对定位)处于事件捕获阶段');
}, true);
A.addEventListener('click', function() {
console.log('父级A，(相对定位)处于事件冒泡阶段');
}, false);
a.addEventListener('click', function() {
console.log('子级a，(绝对定位)处于事件捕获阶段');
}, true);
a.addEventListener('click', function() {
console.log('子级a，(绝对定位)处于事件冒泡阶段');
}, false);
document.addEventListener('click', function() {
console.log('document处于事件捕获阶段');
}, true);
document.addEventListener('click', function() {
console.log('document处于事件冒泡阶段');
}, false);
document.documentElement.addEventListener('click', function() {
console.log('html处于事件捕获阶段');
}, true);
document.documentElement.addEventListener('click', function() {
console.log('html处于事件冒泡阶段');
}, false);
document.body.addEventListener('click', function() {
console.log('body处于事件捕获阶段');
}, true);
document.body.addEventListener('click', function() {
console.log('body处于事件冒泡阶段');
}, false);
}
</script>
</head>
<body>
<div class="A">父
<div class="a">子</div>
</div>
<script type="text/javascript">
var A = document.getElementsByClassName('A')[0];
var a = document.getElementsByClassName('a')[0];
A.onclick = function() {
console.log("父级A，(相对定位)父级事件响应");
}
a.onclick = function() {
console.log("子级a，(绝对定位)子级事件响应");
}
</script>
</body>
</html>
页面展示：
点击父级：
点击子级：
所以说即使脱离文档流，事件流还是存在的。 这个是我的需求需要父子元素都有一个点击功能时，本来用一个事件修饰符stop或者self就可以，后来我突然想到子元素都脱离文档流了还有冒泡吗。有没有路过的大牛对事件流和文档流了解比较深的？有的话请您指点我一下，谢谢！
