माता-पिता DIV पर केवल ईवेंट आग पर कैसे क्लिक करें, बच्चों पर नहीं?

Question

मेरे पास एक वर्ग के साथ एक DIV है foobar, और उस DIV के अंदर कुछ DIV हैं जिन्हें अवर्गीकृत किया गया है, लेकिन मुझे लगता है कि वे foobarवर्ग को विरासत में दे रहे हैं :

$('.foobar').on('click', function() { /*...do stuff...*/ });

मैं चाहता हूं कि केवल DIV में कहीं क्लिक करते समय आग लग जाए लेकिन अपने बच्चों DIV पर नहीं।

Answer 1

यदि एक e.targetही तत्व है this, तो आपने एक वंशज पर क्लिक नहीं किया है।

$('.foobar').on('click', function(e) {
  if (e.target !== this)
    return;
  
  alert( 'clicked the foobar' );
});

.foobar {
  padding: 20px; background: yellow;
}
span {
  background: blue; color: white; padding: 8px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='foobar'> .foobar (alert) 
  <span>child (no alert)</span>
</div>

Comments

यह उत्तर इस टिप्पणी की व्याख्या करता है

— गदोरन

@gdoron: एडम बहुत दयालु है। :)

हाय @vicky। सिर्फ FYI करें, जावास्क्रिप्ट में मूल्य समानता की तुलना के दो अलग-अलग प्रकार हैं। ===या !==का उपयोग करता है "सख्त समानता तुलना एल्गोरिथ्म" है, जबकि ==और !=उपयोग करता है "सार समानता तुलना एल्गोरिथ्म" है, जो प्रकार बलपूर्वक है। सामान्य ज्ञान हमेशा सख्त तुलना का उपयोग करना है, जब तक कि कोकरिव प्रकार की विशिष्ट आवश्यकता नहीं है (क्योंकि इसके नियम थोड़े जटिल हैं) । इस मामले में, क्योंकि वस्तुओं की तुलना की जा रही है, इससे वास्तव में कोई फर्क नहीं पड़ता है, लेकिन आप पाएंगे कि अधिकांश लोग अभी भी सख्त तुलना के साथ चिपके रहेंगे ।

@vicky: यह ठीक है। यह अभी भी सही है। बस आपको जेएस के पास अलग-अलग ऑपरेटर हैं। ;-)

यह एक अच्छा जवाब है क्योंकि यह वेनिला JS addEventListener के साथ भी काम कर सकता है और jQuery के विशिष्ट नहीं है।

— माइकल जियोवानी पुमो

Answer 2

एक और तरीका है जो काम करता है अगर आपको केवल नए ब्राउज़रों को लक्षित करने में कोई आपत्ति नहीं है। बस सीएसएस जोड़ें

pointer-events: none;

div के किसी भी बच्चे को आप क्लिक पर कब्जा करना चाहते हैं। यहां सपोर्ट टेबल है

http://caniuse.com/#feat=pointer-events

Comments

पता है कि मैं 'धन्यवाद' टिप्पणी लिख से बचना चाहिए, लेकिन मैं आपको यह :-) के लिए पैर चुंबन कर सकते हैं

— सिमोना Adriani

@SimonaAdriani हुह?

— n3wb

धन्यवाद, मैंने वैसे ही किया, लेकिन मैं इसके चारों ओर यूनिट टेस्ट केस लिखने के लिए संघर्ष कर रहा हूं। मैं यह कैसे सुनिश्चित कर सकता हूं कि clickप्रोग्रामेटिक क्लिक इवेंट ट्रिगर ब्लॉक किया जाए?

— पंकज पारकर

Answer 3

आप अपने पक्ष में बुदबुदाती का उपयोग कर सकते हैं:

$('.foobar').on('click', function(e) {
    // do your thing.
}).on('click', 'div', function(e) {
    // clicked on descendant div
    e.stopPropagation();
});

Comments

यह मेरे विशिष्ट परिदृश्य के लिए एक अच्छा समाधान है, जैसा कि मैं केवल वंशज <a>तत्वों पर क्लिक को बाहर करना चाहता हूं । बस एक समस्या है: जब मैं उन पर मध्य क्लिक करता हूं तब भी घटना चालू हो जाती है (Google Chrome में परीक्षण किया गया)। क्या इसका कोई ऐसा संस्करण है जो इसे रोकता भी है?

— cgogolin

@cgogolin, इस पर एक नज़र डालें: stackoverflow.com/questions/12197122/…

— जेसिका

Answer 4

मुझे काम करने के लिए स्वीकृत जवाब नहीं मिला, लेकिन ऐसा लगता है कि यह ट्रिक कम से कम वैनिला जेएस में है।

if(e.target !== e.currentTarget) return;

Comments

e.currentTarget संदर्भित करने की तुलना में अधिक सटीक है thisक्योंकि ऑब्जेक्ट जो thisइंगित कर रहा है वह गुंजाइश और संदर्भ के आधार पर बदल सकता है जहां से इसे कहा जाता है

— eballeste

Answer 5

//bind `click` event handler to the `.foobar` element(s) to do work,
//then find the children of all the `.foobar` element(s)
//and bind a `click` event handler to them that stops the propagation of the event
$('.foobar').on('click', function () { ... }).children().on('click', function (event) {
    event.stopPropagation();
    //you can also use `return false;` which is the same as `event.preventDefault()` and `event.stopPropagation()` all in one (in a jQuery event handler)
});

यह clickतत्व के किसी भी बच्चे तत्व (ओं) पर घटना के प्रसार (बुदबुदाहट) को रोक देगा, .foobarइसलिए घटना .foobarउनके ईवेंट हैंडलर (एस) को फायर करने के लिए तत्व (नों) तक नहीं पहुंचेगी ।

यहाँ एक डेमो है: http://jsfiddle.net/bQQJP/

Answer 6

$(".advanced ul li").live('click',function(e){
    if(e.target != this) return;
    //code
    // this code will execute only when you click to li and not to a child
})

Answer 7

मेरे पास एक ही समस्या थी और इस समाधान के साथ आया (अन्य उत्तरों के आधार पर)

 $( ".newsletter_background" ).click(function(e) {
    if (e.target == this) {
        $(".newsletter_background").hide();
    } 
});

मूल रूप से यह कहता है कि यदि लक्ष्य div है तो कोड चलाएं अन्यथा कुछ भी न करें (इसे छिपाएं नहीं)

Answer 8

मेरा मामला भी ऐसा ही है, लेकिन यह ऐसा अवसर है जब आपके पास कुछ foobar- कुछ होता है , और आप केवल एक - एक क्लिक पर बंद करना चाहते हैं:

मूल मामला खोजें

$(".foobar-close-button-class").on("click", function () {
    $(this).parents('.foobar').fadeOut( 100 );
    // 'this' - means that you finding some parent class from '.foobar-close-button-class'
    // '.parents' -means that you finding parent class with name '.foobar'
});

बाल मामले का पता लगाएं

$(".foobar-close-button-class").on("click", function () {
    $(this).child('.foobar-close-button-child-class').fadeOut( 100 );
    // 'this' - means that you finding some child class from '.foobar-close-button-class'
    // '.child' -means that you finding child class with name '.foobar-close-button-child-class'
});

Answer 9

आप event.currentTarget का उपयोग कर सकते हैं। यह केवल इवेंट जो इवेंट मिला है, पर क्लिक करेंगे।

target = e => {
    console.log(e.currentTarget);
  };

<ul onClick={target} className="folder">
      <li>
        <p>
          <i className="fas fa-folder" />
        </p>
      </li>
    </ul>

Answer 10

यदि आप उपयोग नहीं कर सकते हैं pointer-events: none;और आधुनिक ब्राउज़रों को लक्षित कर रहे हैं composedPath, तो आप इस तरह ऑब्जेक्ट पर एक प्रत्यक्ष क्लिक का पता लगाने के लिए उपयोग कर सकते हैं :

element.addEventListener("click", function (ev) {
    if (ev.composedPath()[0] === this) {
        // your code here ...
    }
})

आप यहाँ रचना के बारे में अधिक पढ़ सकते हैं: https://developer.mozilla.org/en-US/docs/Web/API/Event/composedPath

Answer 11

// if its li get value 
document.getElementById('li').addEventListener("click", function(e) {
                if (e.target == this) {
                    UodateNote(e.target.id);
                }
                })
                
                
                function UodateNote(e) {

    let nt_id = document.createElement("div");
    // append container to duc.
    document.body.appendChild(nt_id);
    nt_id.id = "hi";
    // get conatiner value . 
    nt_id.innerHTML = e;
    // body...
    console.log(e);

}

li{
 cursor: pointer;
    font-weight: bold;
  font-size: 20px;
    position: relative;
    width: 380px;
    height: 80px;
    background-color: silver;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 0.5cm;
    border: 2px solid purple;
    border-radius: 12%;}
    
    p{
     cursor: text;
  font-size: 16px;
   font-weight: normal;
    display: block;
    max-width: 370px;
    max-height: 40px;
    overflow-x: hidden;}

<li id="li"><p>hi</p></li>