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 改成div 也是一次

Answer 1

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

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

Answer 2

改变下思路，我的是，把事件绑定到input上面，解决问题，然后使用for 标签指向input元素
<li class="option" >
   <input type="radio" id="inputid"/>
   <label for="inputid">点击label，和点击inpu效果 一样</label>
</li>

$('li.option input').click(function() {
alert("只会执行一次")                
});