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