tıklama etkinlik iki kez ateş olmak - jQuery

Question

Ben aşağıdaki basitleştirilmiş html vardır:

<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 'foo' tıklandığında iyi çalışıyor ve içindeki onay kutusunu tıklama etkinliğini yükseltir.

Ancak, onay kutusunun kendisini tam olarak tıklattığım zaman, 'normal' olayını ve yukarıdaki jquery bağlı olayı tetikler; bu, onay kutusunun kendisini denetlediği anlamına gelir, ardından kendini yeniden işaretler.

Bunun olmasını önlemek için düzenli bir yol var mı?

Answer 1

Olaylar kabarcık

$('.foo input:checkbox').click(function(e){ 
    // will stop event from "bubbling" 
    e.stopPropagation() 
}) 

Answer 2

Onay kutusuna tıklamayı durdurmanız gerekir, böylece bölmenin üstüne gelmez. bir kimlik ardından onay kutusunu testi söylemek vermek

- -

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

Answer 3

yiur $(document).ready function aşağıdaki işlevi bulunur. Tıklanan e.target testine ihtiyacınız var.

Yalnızca kutuyu işaretleyip işaretini kaldırmaya çalışıyorsanız, checked özelliğini ayarlamalısınız.

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

DÜZENLEME: birkaç hatalar düzeltildi.

Çalışma demo: Eğer onay kutusu içine olduğu için ayrıca div tıkladığını onay kutusunu tıkladığınızda çünkühttp://jsfiddle.net/LhSG9/

Answer 4

Olur. Yani yapmanız gereken, kullanıcının div içerisine tıkladığı, ancak onay kutusu olmadığı zaman yakalanmasıdır. yerine bir div kullanmak yerine, bir <label> kullanın: Kullanıcı onay kutusunu tıklayın yoksa Nasıl bu konuda

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

Answer 5

işaretini kaldırarak/varsayılan davranış denetimi ile hareket edecektir. Daha çok semantik olarak doğru, tam olarak istediğiniz şeyi yapar ve JavaScript gerektirmez.

burada örnek çalışma: http://jsfiddle.net/LhSG9/1/