jquery स्टॉप चाइल्ड ट्रिगर अभिभावक घटना

Question

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

स्क्रिप्ट:

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

HTML कोड:

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

यदि आप .stopPropagation () पर अधिक पढ़ना चाहते हैं, तो यहां देखें ।

Comments

पर किसी व्यक्ति में मदद करता है, मैं बदल दिया $(".header a")साथ $(".header *")और किसी भी बच्चे को चयनित (div, रूपों, इनपुट, आदि) मिला है।

— aldo.roman.nurena

e.stopPropagation (); जब तक यह काम नहीं करता है, पहली पंक्ति में लिखा जाना चाहिए!

— एहसान

दुख की बात यह है कि relकॉन्फ़िगर किए गए लाइटबॉक्स को कार्य करने से रोकना

— eapo

Xr280xr द्वारा नीचे दिया गया उत्तर बहुत बेहतर है, क्योंकि यह बच्चों की संभावित घटनाओं में हस्तक्षेप नहीं करता है।

— अलेक्जेंडर जान

आप हल करने की तुलना में अधिक समस्याएं पैदा करते हैं। दस्तावेज़ तत्व पर घटना पर क्लिक करने के लिए तीसरे पक्ष के प्लगिन की कल्पना करें। उन्हें उन क्लिक्स के बारे में कभी पता नहीं चलेगा। लाइटबॉक्स के बारे में टिप्पणी देखें।

— सलमान ए

Answer 2

या, किसी अन्य हैंडलर को रोकने के लिए एक अतिरिक्त ईवेंट हैंडलर होने के बजाय, आप यह निर्धारित करने के लिए कि क्या बच्चा क्लिक किया गया था, अपने ईवेंट हैंडलर को दिए गए ईवेंट ऑब्जेक्ट तर्क का उपयोग कर सकते हैं । 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();
});

Comments

मेरे लिए यह एक और अधिक सुंदर समाधान है क्योंकि आपको प्रत्येक बच्चे के तत्व में एक स्पष्ट रोकथाम () नहीं जोड़ना है।

— रयान ग्रिग्स

और यह काम करता है यदि आपके पास स्वीकृत उत्तर के विपरीत बच्चे पर स्वतंत्र घटनाएँ हैं। निश्चित रूप से क्लीनर और बेहतर समाधान

— 12

ज्यादातर परिस्थितियों में आप इस बारे में परवाह नहीं करेंगे, लेकिन अगर किसी कारण से आपको IE6-8 का समर्थन करने की आवश्यकता है, तो उनके पास नहीं हैcurrentTarget । वर्कअराउंड को इसके साथ बदलना है this, जैसा कि दूसरे उत्तर में सुझाया गया है ।

— अलेक्जेंडर जान

यह केवल क्लिकों को पकड़ने के लिए एक अतिरिक्त श्रोता स्थापित करने की तुलना में एक क्लीनर समाधान है।

— मिक्रो

इस कोड ने मेरे लिए 'var लक्ष्य = $ (e.target) बेहतर काम किया; अगर (लक्ष्य। ("स्पैन")) वापसी; `

— Cr1xus

Answer 3

का उपयोग करके बेहतर तरीका () की तरह,

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

Answer 4

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

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

यहाँ कुछ संभव HTML है:

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

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

Answer 5

मैं इस सवाल पर अड़ गया, एक और जवाब की तलाश में।

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

जावास्क्रिप्ट:

document.getElementById("parent").addEventListener("click",  function (e) {
    if (this !== event.target) return;
    // Do something
});

jQuery:

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

Answer 6

या यह:

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

Comments

@ Halcyon991 ई तर्क के माध्यम से किसी भी तरह से पारित हो जाता है, ई सिर्फ एक संदर्भ है

— qodeninja

@qodeninja हाँ, लेकिन यह उपयोग नहीं किया जाता है, तो एक अनावश्यक चरित्र इसके अलावा।

— हेलसीयन 991

return falseलिंक करने के लिए कोई बिंदु नहीं जोड़ना चाहिए, यह क्लिक करने योग्य होना चाहिए।

— इपो

Answer 7

इस सीएसएस को बच्चों के लिए जोड़ना सबसे सरल उपाय है:

.your-child {
    pointer-events: none;
}

Comments

मुझे Wordpress द्वारा जोड़े गए अवांछित फ़ॉन्ट टैग के लिए इसकी आवश्यकता थी और इसने मेरे लिए काम किया

— Ndm Gjr

Answer 8

इसे करने का एक और छोटा तरीका:

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

Comments

लेकिन ... हेडर पर क्लिक करने पर यह कुछ नहीं करता है।

— लियोरा हैडोंट

हर बार जब आप शीर्ष लेख पर क्लिक करते हैं, तो यह बच्चों के लिए एक नया क्लिक ईवेंट जोड़ता है ('a')।

— फ्रैंक फोर्ट