下面是测试代码:
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 也是一次
解决方案
这个例子真是奇葩。。
网页中的节点会继承上级节点的事件:http://bazhuang.iteye.com/blog/163011
在chrome里看到点击了lable之后,第一个checkbox的checked为true
也就是说点击label区域实际上是触发了label和第一个checkbox的onlick方法