CSS:重叠的兄弟元素进行事件冒泡

Posted by luoway on November 4, 2015

父子级元素的事件流

segmentfault:浅谈事件冒泡与事件捕获

浏览器默认的事件冒泡:

<div onclick="alert('parent')" class="parent">
	parent
	<div onclick="alert('child')" class="child">child</div>
</div>
parent
child


使用addEventListenner()测试一下事件捕获:

<div id="parent" class="parent">
	parent
	<div id="child" class="child">child</div>
</div>
<script>
	var child = document.getElementById('child'),
		parent = document.getElementById('parent');
	child.addEventListener('click',function(){alert("child")},true);
	parent.addEventListener('click',function(){alert("parent")},true);
</script>
parent
child


事件的传播是可以阻止的:

  • 在W3c中,使用stopPropagation()方法
  • 在IE下设置cancelBubble = true;

阻止事件的默认行为:

  • 在W3c中,使用preventDefault()方法;
  • 在IE下设置window.event.returnValue = false;
  • return false;

不是所有的事件都能冒泡

以上是DOM中父子级元素的事件流顺序。

定位重叠的兄弟元素

对于CSS中由于定位设置出现的重叠的兄弟元素,它的事件流是怎样的呢?
见例子:

<div style="
  width: 100px;
  height:50px;
  float:left;
  border:red 1px solid;
  background-color:red;" onclick="alert('red')"></div>	
<div style="
  margin-left:-50px;
  width: 100px;
  height:50px;
  float:left;
  border:blue 1px solid;
  background-color:blue;" onclick="alert('blue')"></div>
<div style="
  margin-left:-100px;
  width: 100px;
  height:50px;
  float:left;
  border:green 1px solid;
  background-color:green;" onclick="alert('green')"></div>

以上例子经firefox测试可知:后添加的兄弟元素会覆盖先添加的兄弟元素,并阻止事件传播到先添加的兄弟元素。

对于定位相互重叠的兄弟元素,推测浏览器默认只执行可见的元素上的事件,此时要想让事件传播只能自行添加事件了。

var red=document.getElementById("red"),
    blue=document.getElementById("blue"),
    green=document.getElementById("green");

red.addEventListener("click",function(){
	alert("red");
});
blue.addEventListener("click",function(){
	alert("blue");
	red.click();
});
green.addEventListener("click",function(){
	alert("green");
	blue.click();
});