sự kiện nhấp chuột bị sa thải hai lần - jquery

Question

Tôi có html đơn giản sau đây:

<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> 

Nhấp 'foo' các 200x200 div hoạt động tốt, và làm tăng sự kiện click cho vào hộp kiểm bên trong nó.

Tuy nhiên khi tôi chính xác nhấp vào hộp kiểm, nó sẽ kích hoạt sự kiện 'bình thường', cộng với sự kiện liên kết jquery ở trên, nghĩa là hộp kiểm tự kiểm tra, sau đó tự bỏ chọn.

Có cách nào ngăn chặn điều này xảy ra không?

Answer 1

Sự kiện bong bóng. Bạn sẽ cần kiểm tra e.target đã được nhấp.

Và nếu bạn chỉ đang cố gắng chọn/bỏ chọn hộp, bạn nên đặt thuộc tính checked.

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

EDIT: Đã sửa lỗi một vài lỗi.

bản demo làm việc:http://jsfiddle.net/LhSG9/

Answer 2

Bạn cần phải ngừng nhấp vào hộp kiểm để nó không bong bóng lên đến div.

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

Answer 3

bao gồm các chức năng sau đây trong yiur $(document).ready function -

đưa ra một id nói thử nghiệm để hộp kiểm của bạn sau đó -

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

Answer 4

Nó xảy ra bởi vì khi bạn nhấn vào hộp kiểm bạn cũng đang nhấp vào div vì hộp kiểm là bên trong nó. Vì vậy, những gì bạn nên làm là nắm bắt khi người dùng nhấp vào bên trong div nhưng không có hộp kiểm. Nếu người dùng nhấp vào hộp kiểm nó sẽ hoạt động với kiểm tra hành vi mặc định của nó/bỏ chọn

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

Answer 5

Làm thế nào về điều này: thay vì sử dụng một div, sử dụng một <label>. Nó chính xác hơn về mặt ngữ nghĩa, thực hiện chính xác những gì bạn muốn và không yêu cầu JavaScript.

Ví dụ làm việc tại đây: http://jsfiddle.net/LhSG9/1/