javascript - js 中，为一个里面带有input 的label 绑定事件后，事件执行两次，求解

Question

下面是测试代码：
HTML代码：

<label class="herocheckbox "  onclick="javascript:aaa();">
<input type="checkbox" id="hero1"  value="hero1">
<input type="checkbox" id="hero2"  value="hero2">
<input type="checkbox" id="hero3"  value="hero3">
</label>

JS代码：

<script type="text/javascript">
function aaa(){
	alert("1");
}
</script>

CSS：

<style type="text/css">
.herocheckbox {
width: 40px;
height: 40px;
float: left;
margin: 10px;
border:1px solid #ccc;
}
.herocheckbox input {
position: absolute;
left: -11000px;
}
</style>

为什么在点击label后，弹出两次框？而不是一次？
将里面的input 清空后就剩下一次。
将label 改成p 也是一次

Answer 1

这个例子真是奇葩。。
网页中的节点会继承上级节点的事件：http://bazhuang.iteye.com/blog/163011
在chrome里看到点击了lable之后，第一个checkbox的checked为true

也就是说点击label区域实际上是触发了label和第一个checkbox的onlick方法