Nhấp vào sự kiện kích hoạt hai lần

Question

Tôi đang cố gắng chạy một số chức năng khi nhấp vào văn bản nhãn nhưng sự kiện nhấp được kích hoạt hai lần.
HTML

<label class="label_one"> 
    Label One 
    <input type="checkbox"/> 
</label> 

Nhưng nó không xảy ra nếu tôi thay đổi mã html như thế này.

<label for="test" class="label_two"> 
    Label Two 
    <input type="checkbox"/> 
</label> 

Kịch bản của tôi là thế này:

$('.label_one').click(function(){ 
    console.log('testing'); 
}); 

bất cứ ai có thể giải thích cho tôi tại sao điều này xảy ra như thế này.
jsfiddle của tôi là ở đây kiểm tra xem nó.
https://jsfiddle.net/sureshpattu/hvv6ucu8/3/

Answer 1

Di chuyển đầu vào bên ngoài nhãn của bạn và sử dụng thuộc tính for="".

<label class="label_one" for="checkbox_one"> 
    Label One 
</label> 
<input type="checkbox" id="checkbox_one" /> 
<br/><br/> 
<label for="checkbox_two" class="label_two"> 
    Label Two 
</label> 
<input type="checkbox" id="checkbox_two"/> 

<div class="logs"></div> 

JSFiddle: https://jsfiddle.net/hvv6ucu8/2/

Answer 2

Đó là vì event bubbling.

Nói chung tất cả các yếu tố bong bóng sự kiện vào thư mục gốc của tài liệu trong khi label thẻ sẽ bong bóng các sự kiện để con của nó nút và thats làm thế nào thẻ đầu vào là nhận được đánh dấu khi bạn nhấp vào dom nhãn.

Vì vậy, trong trường hợp của bạn, bạn gắn handler sự kiện vào thẻ nhãn nên

1. Nó gọi khi thẻ nhãn được nhấp
2. bong bóng sự kiện bên trong nó và hộp kiểm được chọn và hộp kiểm bong bóng sự kiện để nó nút cha đó là label thẻ một lần nữa do đó nó được gọi là hai lần.

Để giải quyết vấn đề này, chỉ cần đính kèm trình xử lý sự kiện vào thẻ đầu vào/hộp kiểm, nó sẽ hoạt động tốt.

Answer 3

<label for="text" class="label_one"> 
    Label One 
    <input type="checkbox"/> 
</label> 
<br/><br/> 
<label for="text" class="label_two"> 
    Label Two 
    <input type="checkbox" name="1"/> 
</label> 

bạn quên đặt thuộc tính trong nhãn (label_one). chỉ cần thay đổi điều đó. nó sẽ hoạt động

Answer 4

Nhấp vào checkbox nhấp vào label. Cố gắng sử dụng .change sự kiện trên đầu vào

$('.label_one input').change(function(){ 
    var html = '<div class="log_sec_one">Log</div>'; 
    $('.logs').append(html); 
}); 

$('.label_two input').change(function(){ 
    var html = '<div class="log_sec_two">Log</div>'; 
    $('.logs').append(html); 
}); 

DEMO

Answer 5

tôi không thể tái sản xuất này trong phiên bản của chrome mà tôi đang sử dụng.

Nhưng nếu bạn đang phải đối mặt với điều này trong một số trình duyệt, nó có khả năng bởi vì -

Theo spec, nhãn chứa đầu vào, và những kết nối với một đầu vào thông qua for thuộc tính kích hoạt một nhấp chuột vào đầu vào liên quan khi họ được nhấp.

Vì vậy, trong trường hợp đầu tiên của bạn, có những sự kiện 2 nhấp chuột:

• nhấp chuột thực tế trên <label>
• Bấm kích hoạt trên <input> bởi nhãn

Một kích hoạt trên <input> sẽ nổi lên đến <label> và kích hoạt trình xử lý của bạn.

Trong trường hợp thứ hai, vì thuộc tính for được chỉ định và không có đầu vào khớp với id của 'thử nghiệm', nhấp bổ sung không được kích hoạt ngay cả khi đầu vào nằm trong nhãn.