jquery स्टॉप बच्चे ट्रिगरिंग पेरेंट इवेंट

Question

मेरे पास एक div है जिसे मैंने onclick ईवेंट से जोड़ा है। इस div में एक लिंक के साथ एक टैग है। जब मैं लिंक पर क्लिक करता हूं तो div से onclick ईवेंट भी ट्रिगर होता है। मैं इसे कैसे अक्षम कर सकता हूं ताकि अगर लिंक onclick पर क्लिक किया गया है तो निकाल दिया नहीं गया है?

स्क्रिप्ट:

$(document).ready(function(){ 
    $(".header").bind("click", function(){ 
     $(this).children(".children").toggle(); 
    }); 
}) 

एचटीएमएल कोड:

<div class="header"> 
    <a href="link.html">some link</a> 
    <ul class="children"> 
     <li>some list</li> 
    </ul> 
</div> 

Answer 1

यह करें:

$(document).ready(function(){ 
    $(".header").click(function(){ 
     $(this).children(".children").toggle(); 
    }); 
    $(".header a").click(function(e) { 
     e.stopPropagation(); 
    }); 
}); 

आप read more on .stopPropagation(), look here चाहते हैं।

Answer 2

या इस:

$(document).ready(function(){ 
    $(".header").click(function(){ 
     $(this).children(".children").toggle(); 
    }); 
    $(".header a").click(function(e) { 
     return false; 
    }); 
}); 

Answer 3

बेहतर तरीका की तरह चेनिंग साथ on() का उपयोग करके,

$(document).ready(function(){ 
    $(".header").on('click',function(){ 
     $(this).children(".children").toggle(); 
    }).on('click','a',function(e) { 
     e.stopPropagation(); 
    }); 
}); 

Answer 4

यहाँ जवाब भी सचमुच ओपी के सवाल ले लिया। इन उत्तरों को एक परिदृश्य में कैसे विस्तारित किया जा सकता है जहां कई बच्चे तत्व हैं, न केवल <a> टैग? यहाँ एक रास्ता है।

मान लें कि आपके पास एक ब्लैक आउट पृष्ठभूमि और ब्राउज़र में केंद्रित फ़ोटो के साथ एक फोटो गैलरी है। जब आप काले रंग की पृष्ठभूमि पर क्लिक करते हैं (लेकिन इसके अंदर कुछ भी नहीं) तो आप ओवरले को बंद करना चाहते हैं।

यहाँ कुछ संभव एचटीएमएल है:

<div class="gallery" style="background: black"> 
    <div class="contents"> <!-- Let's say this div is 50% wide and centered --> 
     <h1>Awesome Photos</h1> 
     <img src="img1.jpg"><br> 
     <img src="img2.jpg"><br> 
     <img src="img3.jpg"><br> 
     <img src="img4.jpg"><br> 
     <img src="img5.jpg"> 
    </div> 
</div> 

और यहाँ कैसे जावास्क्रिप्ट काम करेगा है:

$('.gallery').click(
    function() 
    { 
     $(this).hide(); 
    } 
); 

$('.gallery > .contents').click(
    function(e) { 
     e.stopPropagation(); 
    } 
); 

यह हर अनुसंधान .gallery से .contents अंदर तत्वों से क्लिक ईवेंट बंद हो जाएगा तो गैलरी बंद हो जाएगा केवल तभी जब आप फीका काला पृष्ठभूमि क्षेत्र में क्लिक करते हैं, लेकिन जब आप सामग्री क्षेत्र में क्लिक नहीं करते हैं। इसे कई अलग-अलग परिदृश्यों पर लागू किया जा सकता है।

Answer 5

एक और अधिक कम जिस तरह से यह करने के लिए:

$('.header').on('click', function() { 
    $(this).children('a').on('click', function(e) { 
     e.stopPropagation(); 
     $(this).siblings('.children').toggle(); 
    }); 
}); 

Answer 6

या, बल्कि एक और हैंडलर को रोकने के लिए एक अतिरिक्त ईवेंट हैंडलर की तुलना में, आप चाहे एक बच्चे का निर्धारण करने के Event Object तर्क आपके क्लिक ईवेंट हैंडलर के लिए पारित उपयोग कर सकते हैं क्लिक किया गया था। target क्लिक किया तत्व हो जाएगा और currentTarget .header div हो जाएगा:

$(".header").click(function(e){ 
    //Do nothing if .header was not directly clicked 
    if(e.target !== e.currentTarget) return; 

    $(this).children(".children").toggle(); 
}); 

Answer 7

मैं इस सवाल पर ठोकर खाई है, एक और जवाब की तलाश में।

मैं माता-पिता को ट्रिगर करने से सभी बच्चों को रोकना चाहता था।

यह सबसे आसान है कि के लिए सबसे अधिक पठनीय विधि है:

$(".parent").click(function() { 
    // Do something 
}).children().on("click", function(e) { 
    e.stopPropagation(); 
});