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

下面是测试代码：
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 也是一次