'डबल घटना' से बचना जब LABELS एक क्लिक करें घटना के साथ एक तत्व के भीतर क्लिक किया

Question

मैं कुछ HTML है कि इस तरह दिखता है:

<ul class="toggleList"> 
     <li><input type="checkbox" name="toggleCbx1" id="toggleCbx1" /><label for="toggleCbx1">Item 1</label></li> 
</ul> 

मैं jQuery का उपयोग कर रहा LI के लिए क्लिक करें घटना संलग्न करने के लिए है कि फिर कुछ कक्षाओं को संशोधित करेगा और चेकबॉक्स को चेक या अनचेक करेगा।

मैं जैसे क्लिक करें घटना देते हैं:

$("ul.toggleList li").click(function(){toggleStuff($(this));}) 

अगर मैं LI में कहीं भी क्लिक यह ठीक काम करता है। हालांकि, अगर मैं एलआईएलईएल में एलआईबीईएल पर क्लिक करता हूं, तो मेरे क्लिक इवेंट को दो बार बुलाया जाता है।

वह क्यों है? मुझे लगता है कि यह किसी प्रकार की घटना से जुड़ा हुआ है, सही है?

ऐसे में, .triggerHandler का उपयोग करने का समाधान है? मैंने इस पर कुछ पढ़ा है और कुछ उदाहरणों को देखा है, लेकिन मैं इसे स्थापित करने के लिए उचित वाक्यविन्यास को समझ नहीं पा रहा हूं।

परिशिष्ट:

सैम एक विकल्प मैं समाधान के लिए सुराग लगता है कि ने कहा। यह शायद ट्रिगर हैडलर मुद्दा नहीं है।

ऐसा लगता है कि क्या हो रहा है (डिफ़ॉल्ट रूप से?) LABEL पर क्लिक करने से एक क्लिक ईवेंट बबल-अप होगा। समाधान यह देखने के लिए प्रतीत होता है कि यह घटना लेबल द्वारा ट्रिगर की गई थी और यदि ऐसा है, तो उस पर अधिक सवारी करें।

[...].click(function(evt){ 
     console.log(evt.target); 
     if ($(evt.target).not("label")) { 
      console.log("not label?"); 
      doMyThing($(this)); 
     }else{ 
      console.log("is label?"); 
     }; 

से काम नहीं होता:

कुछ परीक्षण कर रहा। चाहे मैं LABEL या किसी अन्य तत्व पर क्लिक करता हूं, ऐसा लगता है कि यह लेबल नहीं है।

अजीब तरह, तर्क पीछे करता काम:

[...].click(function(evt){ 
     console.log(evt.target); 
     if ($(evt.target).is("label")) { 
      console.log("is label?"); 
     }else{ 
      console.log("not label?"); 
      doMyThing($(this)); 
     }; 

वह यह है कि क्या किसी भी विचार?

अरे: मैं और अधिक परीक्षण

अंतिम परिशिष्ट करूँगा ...! उपयोगकर्ता त्रुटि मैंने, गलती से, '.not' के विपरीत '.not' नहीं माना। अच्छा, यह सच नहीं है। .is तुलना करता है और एक बूलियन देता है। । उन तत्वों को हटा नहीं देता जो मेल खाते हैं (और इसलिए ऑब्जेक्ट लौटाते हैं)।

तो, मुझे लगता है कि एक हमेशा .is के लिए जांच सकता है और के लिए परीक्षण एक और को उपयोग करने के लिए है

Answer 1

मैं इस पुन: पेश कर सकते हैं 'नहीं है।' डुप्लिकेट इवेंट कॉल में से कम से कम एक के उपयोग से टैग पर विशेषता के लिए संबंधित प्रतीत होता है।

भले ही, यदि आप घटना (event.target) के स्रोत की जांच तो यह अवांछित घटना ट्रिगर अनदेखा कर देना चाहिए आप प्राप्त कर रहे हैं:

$("ul.toggleList li").click(function (evt) { 
     if ($(evt.target).is("li")) { 
      toggleStuff($(this)); 
     } 
    } 
); 

अधिक जानकारी के लिए http://docs.jquery.com/Events/jQuery.Event#event.type देखें।