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