Tại sao sự kiện nhấp chuột của tôi được gọi hai lần trong jquery?

Question

Tại sao sự kiện nhấp chuột của tôi bị bắn hai lần trong jquery?

HTML

<ul class=submenu> 
    <li><label for=toggle><input id=toggle type=checkbox checked>Show</label></li> 
</ul> 

Javascript

$("ul.submenu li:contains('Show')").on("click", function(e) { 
    console.log("toggle"); 
    if ($(this).find("[type=checkbox]").is(":checked")) console.log("Show"); 
    else console.log("Hide"); 
}); 

Đây là những gì tôi nhận được trong giao diện điều khiển:

toggle      menu.js:39 
Show      menu.js:40 
toggle      menu.js:39 
Hide      menu.js:41 


> $("ul.submenu li:contains('Show')") 
[<li>​           ] 
    <label for=​"toggle">​ 
     <input id=​"toggle" type=​"checkbox" checked>​ 
     "Show" 
    </label>​ 
</li>​ 

Answer 1

Nếu tôi nhớ không lầm, tôi đã nhìn thấy hành vi này trên ít nhất một số trình duyệt, trong đó nhấp vào labelcả hai kích hoạt nhấp chuột vào số labelvà trên số input.

Vì vậy, nếu bạn bỏ qua các sự kiện trong đó e.target.tagName là "LABEL", bạn sẽ chỉ nhận được một sự kiện. Ít nhất, đó là những gì tôi nhận được trong các bài kiểm tra của tôi:

• Example with both events | Source
• Example filtering out the e.target.tagName = "LABEL" ones | Source

Answer 2

Hành vi này xảy ra khi thẻ input được cấu trúc bên trong label tag:

<label for="toggle"><input id="toggle" type="checkbox" checked>Show</label> 

Nếu hộp kiểm input được đặt bên ngoài label, với việc sử dụng các id và for các thuộc tính, nhiều bắn của sự kiện click sẽ không xảy ra:

<label for="toggle">Show</label> 
<input id="toggle" type="checkbox" checked> 

Answer 3

Tôi khuyên bạn nên sử dụng sự kiện change trên input[type="checkbox"] sẽ chỉ được kích hoạt một lần. Vì vậy, như một giải pháp cho vấn đề trên, bạn có thể làm như sau:

$("#toggle").on("change", function(e) { 
    if ($(this).is(":checked")) 
    console.log("toggle: Show"); 
    else 
    console.log("toggle: Hide"); 
}); 

https://jsfiddle.net/ssrboq3w/

Phiên bản vani JS sử dụng querySelector mà không tương thích với phiên bản cũ của trình duyệt IE:

document.querySelector('#toggle').addEventListener('change',function(){ 
    if(this.checked) 
    console.log('toggle: Show'); 
    else 
    console.log('toggle: Hide'); 
}); 

https://jsfiddle.net/rp6vsyh6/