17Mar/11Off
label导致冒泡事件的诡异问题
今天遇到一个很怪异的问题，给label标签绑定了click事件，但是每次单击时，click事件都会执行两次。开始以为自己的代码有问题，反复痛苦的检查了N久以后，才发现自己代码没问题。根本原因在于事件的冒泡机制和label标签共同作用引起的。
<ul id="sdfsde" class="multi-list">
<li><label for="q1"><input id="q1" type="text" value="" />工商</label></li>
<li><label for="q2"><input id="q2" type="text" value="" />农业</label></li>
<li><label for="q3"><input id="q3" type="text" value="" />招商</label></li>
<li><label for="q4"><input id="q4" type="text" value="" />建设</label></li>
<li><label for="q5"><input id="q5" type="text" value="" />浦发</label></li>
</ul>
<li><label for="q1"><input id="q1" type="text" value="" />工商</label></li>
<li><label for="q2"><input id="q2" type="text" value="" />农业</label></li>
<li><label for="q3"><input id="q3" type="text" value="" />招商</label></li>
<li><label for="q4"><input id="q4" type="text" value="" />建设</label></li>
<li><label for="q5"><input id="q5" type="text" value="" />浦发</label></li>
</ul>
执行两次的过程如下：
- 单击label标签，第一次执行click事件
- 由于label标签的特殊性，事件向下传递到input标签
- 事件开始冒泡几上传递
- 冒泡到label标签时，第二次执行click事件
为了更便于说明上面的过程，请看下面的示例：
<label id="lbUser">
<input id="txtUser" type="text" value="单击这里alert二次" />
单击这里alert三次
</label>
<script type="text/javascript">
$('lbUser').click(function(){
alert('单击label');
});
$('txtUser').click(function(){
alert('单击input');
});
</script>
<input id="txtUser" type="text" value="单击这里alert二次" />
单击这里alert三次
</label>
<script type="text/javascript">
$('lbUser').click(function(){
alert('单击label');
});
$('txtUser').click(function(){
alert('单击input');
});
</script>
当点击label中的文字时，依次弹出：
- alert('单击label')
- alert('单击input');
- alert('单击label');
当直接点击input输入框时，依次弹出：
- alert('单击input');
- alert('单击label');
总结：这个问题让自己纠结了，很长时间。主要原因时没有考虑到冒泡，需要注意的这里我们注册的事件都是绑定在冒泡期间，但是因为label(会自动将焦点转到和标签相关的表单控件上)，所以导致了这个意外。