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绑定事件，这意味着复选框会自行检查，然后再次取消选中它自己。

有没有一种简洁的方法来防止这种情况发生？

来源

2011-01-10 maxp

它在IE中看起来不错，而不是在FF中。 – Shoban 2011-01-10 17:48:10

活动泡沫。您需要测试被点击的e.target。

如果你只是想检查/取消选中该框，你应该设置其checked属性。

$('.foo').click(function(e){ 
    if(e.target.tagName.toUpperCase() !== 'INPUT') { 
     var cbox = $(this).find('input:checkbox')[0]; 
     cbox.checked = !cbox.checked; 
    } 
});

编辑：修正了几个错误。

工作演示：http://jsfiddle.net/LhSG9/

来源

2011-01-10 17:49:06 user113716

+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() 
})

来源

2011-01-10 17:46:38

包括以下功能yiur $(document).ready function -

给出一个ID说，测试你的复选框，然后 -

$('#test').click(function(){ 
return false; 
});

来源

2011-01-10 17:48:08 Alpesh

这是因为当你点击你的DIV也可以点击因为复选框是里面的复选框。所以你应该做的是捕获当用户点击div内部但没有复选框。如果用户点击该复选框，将其默认行为的检查行动/取消选中

$('.foo:not(':checkbox')').click(function(){ 
    $(this).find('input:checkbox')[0].click(); 
});

来源

2011-01-10 18:00:26 amosrivera

如何：而不是使用一个div，使用<label>。它在语义上更加正确，完全符合你的要求，并且不需要JavaScript。

工作示例：http://jsfiddle.net/LhSG9/1/

来源

2011-01-10 18:45:51 Phrogz

click事件被解雇两次 - jQuery的

回答

相关问题