Tıklama olayım neden jquery'de iki kez çağrıldı?

Question

Tıklama olayım neden jquery'de iki kez ateşlendi?

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"); 
}); 

Bu ne konsolda olsun: Yanlış hatırlamıyorsam

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

, en azından bazı bu davranışı gördüm tarayıcıları, öğesinin her ikisini de tıklattığınızda, input'da labelve tuşlarına bir tıklamayı tetikler.

e.target.tagName'un "LABEL" olduğu olayları görmezden gelirseniz, yalnızca bir etkinlik alırsınız. En azından, benim testlerimde bu var:

• Example with both events | Source
• Example filtering out the e.target.tagName = "LABEL" ones | input onay kutusu id ve for niteliklerin kullanımı, çoklu atış ile label dışında yerleştirilirse

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

  : input etiketi label etiketi içinde yapılandırılmıştır zaman Source

Answer 2

Bu davranış oluşur click olayının oluşmaz:

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

Answer 3

Sadece bir kez tetiklenecek olan input[type="checkbox"] numaralı telefondan change olayını kullanmanızı tavsiye ederim. Yukarıdaki soruna bir çözüm yapmanız edebileceğiniz gibi Yani şu:

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

https://jsfiddle.net/ssrboq3w/

IE'nin eski sürümleri ile uyumlu değildir querySelector kullanarak vanilya JS sürümü:

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

https://jsfiddle.net/rp6vsyh6/