click事件被解雇两次 - jQuery的
我有以下简单的html:click事件被解雇两次 - jQuery的
<div class="foo" style="width:200px; height:200px;">
<input type="checkbox" />
</div>
<script type="text/javascript">
$('.foo').click(function(){$(this).find('input:checkbox')[0].click();});
</script>
点击200x200的DIV“富”的效果很好,并提出了里面的复选框,单击事件。但是,当我完全点击复选框本身时,它会触发它的“正常”事件,再加上面的jquery绑定事件,这意味着复选框会自行检查,然后再次取消选中它自己。
有没有一种简洁的方法来防止这种情况发生?
活动泡沫。您需要测试被点击的e.target
。
如果你只是想检查/取消选中该框,你应该设置其checked
属性。
$('.foo').click(function(e){
if(e.target.tagName.toUpperCase() !== 'INPUT') {
var cbox = $(this).find('input:checkbox')[0];
cbox.checked = !cbox.checked;
}
});
编辑:修正了几个错误。
+1两者都使用现有选择器上的链接_and_非常简洁的`bind`的`false`形式。 – Phrogz 2011-01-10 17:53:37
@ Phrogz:谢谢,但我不得不改变这种情况,因为`false`也会做一个`preventDefault`。 :o( – user113716 2011-01-10 17:54:07
您需要停止点击复选框,以免冒泡到div。
$('.foo input:checkbox').click(function(e){
// will stop event from "bubbling"
e.stopPropagation()
})
包括以下功能yiur $(document).ready function
-
给出一个ID说,测试你的复选框,然后 -
$('#test').click(function(){
return false;
});
这是因为当你点击你的DIV也可以点击因为复选框是里面的复选框。所以你应该做的是捕获当用户点击div内部但没有复选框。如果用户点击该复选框,将其默认行为的检查行动/取消选中
$('.foo:not(':checkbox')').click(function(){
$(this).find('input:checkbox')[0].click();
});
它在IE中看起来不错,而不是在FF中。 – Shoban 2011-01-10 17:48:10