stopPropagation बनाम stopImmediatePropagation

Question

बीच क्या अंतर है event.stopPropagation()और event.stopImmediatePropagation()?

Answer 1

stopPropagationकिसी भी माता-पिता के संचालकों को निष्पादित होने stopImmediatePropagationसे रोक देगा, किसी भी अभिभावक संचालकों और किसी अन्य संचालकों को निष्पादित करने से रोक देगा

Jquery प्रलेखन से त्वरित उदाहरण :

$("p").click(function(event) {
  event.stopImmediatePropagation();
});

$("p").click(function(event) {
  // This function won't be executed
  $(this).css("background-color", "#f00");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>example</p>

ध्यान दें कि इवेंट बाइंडिंग का क्रम यहाँ महत्वपूर्ण है!

$("p").click(function(event) {
  // This function will now trigger
  $(this).css("background-color", "#f00");
});

$("p").click(function(event) {
  event.stopImmediatePropagation();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>example</p>

Comments

आप "माता-पिता" पर जोर देते हैं, लेकिन वास्तव में दोनों ही बच्चों को प्रवेश करना बंद कर देते हैं और यदि कब्जा चरण में कहा जाता है! विवरण के लिए मेरा उत्तर देखें।

— रॉबर्ट सिएमर

Answer 2

यह दिखाने के लिए एक छोटा सा उदाहरण है कि ये दोनों प्रसार कैसे काम करते हैं।

var state = {
  stopPropagation: false,
  stopImmediatePropagation: false
};

function handlePropagation(event) {
  if (state.stopPropagation) {
    event.stopPropagation();
  }

  if (state.stopImmediatePropagation) {
    event.stopImmediatePropagation();
  }
}

$("#child").click(function(e) {
  handlePropagation(e);
  console.log("First event handler on #child");
});


$("#child").click(function(e) {
  handlePropagation(e);
  console.log("Second event handler on #child");
});

// First this event will fire on the child element, then propogate up and
// fire for the parent element.
$("div").click(function(e) {
  handlePropagation(e);
  console.log("Event handler on div: #" + this.id);
});


// Enable/disable propogation
$("button").click(function() {
  var objectId = this.id;
  $(this).toggleClass('active');
  state[objectId] = $(this).hasClass('active');
  console.log('---------------------');
});

div {
  padding: 1em;
}

#parent {
  background-color: #CCC;
}

#child {
  background-color: #000;
  padding: 5em;
}

button {
  padding: 1em;
  font-size: 1em;
}

.active {
  background-color: green;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
  <div id="child">&nbsp;</div>
</div>

<button id="stopPropagation">Stop Propogation</button>
<button id="stopImmediatePropagation" ">Stop Immediate Propogation</button>

तीन इवेंट हैंडलर बंधे हुए हैं। यदि हम किसी भी प्रचार को नहीं रोकते हैं, तो चार अलर्ट होने चाहिए - तीन बच्चे के तलाक पर, और एक माता-पिता के तलाक पर।

यदि हम ईवेंट को प्रचारित करने से रोकते हैं, तो 3 अलर्ट होंगे (सभी आंतरिक बाल दिवस पर)। चूंकि ईवेंट डोम पदानुक्रम का प्रचार नहीं करेगा, इसलिए पैरेंट डिव इसे नहीं देखेगा, और इसका हैंडलर फायर नहीं करेगा।

यदि हम तुरंत प्रचार बंद कर देते हैं, तो केवल 1 चेतावनी होगी। भले ही आंतरिक बाल विभाग में तीन घटना संचालकों को संलग्न किया गया हो, केवल 1 को निष्पादित किया जाता है और किसी भी आगे के प्रसार को तुरंत मार दिया जाता है, यहां तक ​​कि एक ही तत्व के भीतर भी।

Comments

दोनों stopPropagation()वेरिएंट डोम पदानुक्रम के नीचे प्रचार करना भी बंद कर देंगे। सिर्फ ऊपर नहीं। कृपया कब्जा चरण के साथ विवरण के लिए मेरे उत्तर की जांच करें ।

— रॉबर्ट सिएमर

Answer 3

से jQuery एपीआई :

किसी अतिरिक्त हैंडलर को किसी तत्व को निष्पादित करने से रोकने के अलावा, यह विधि ईवेंटलीस्टॉप.प्रॉपगैगेशन () भी कहकर बुदबुदाहट को रोकती है। पूर्वजों तत्वों को बुदबुदाई से घटना को रोकने के लिए, लेकिन अन्य घटना संचालकों को एक ही तत्व पर निष्पादित करने की अनुमति दें, हम इसके बजाय Event.stopPropagation () का उपयोग कर सकते हैं।

यह जानने के लिए कि क्या इस पद्धति को कभी भी उस ईवेंट ऑब्जेक्ट पर बुलाया गया था, तो event.isImmediatePropagationStontin () का उपयोग करें।

संक्षेप में: event.stopPropagation()एक ही तत्व पर अन्य हैंडलर को निष्पादित करने की अनुमति देता है, जबकि हर घटना को चलने से event.stopImmediatePropagation()रोकता है ।

Comments

बस यकीन है, देशी जावास्क्रिप्ट संस्करण event.stopImmediatePropagationनहीं सही bubbling रोक नहीं करता है?

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

यह करता है, बुदबुदाती है जब घटना को मूल तत्वों के लिए प्रचारित किया stopImmediatePropagationजाता है, घटना को प्रचारित होने से रोकता है, दोनों को बुदबुदाहट को रोकना चाहिए, यह कुछ भी नहीं लायक है जो आप कैप्चर करने के लिए मोड को बदल सकते हैं जो सबसे बाहरी तत्वों को ट्रिगर करेगा और उसके बाद ही जाना नीचे बच्चों को (उत्साह से भरा हुआ डिफ़ॉल्ट है, और विपरीत दिशा में काम करता है)

— JonnySerra

कम से कम कहने के लिए, सटीक नहीं है। कब्जा चरण में रोकना होगा की अनुमति नहीं के रूप में एक ही तत्व पर बुलबुला संचालकों निष्पादित करने के लिए मेरा उत्तर में विस्तार से बताया।

— रॉबर्ट सिएमर

Answer 4

event.stopPropagationमाता-पिता तत्वों पर चलने से हैंडलर को रोकेंगे।
कॉलिंग event.stopImmediatePropagationउसी तत्व पर अन्य हैंडलर को चलने से भी रोकेगी।

Comments

वर्थ उल्लेख है कि घटना संचालकों को उस क्रम में निष्पादित किया जाता है जिसमें उन्हें तत्व से जोड़ा गया है।

— फेलिक्स क्लिंग

Answer 5

मैं एक देर से आने वाला हूं, लेकिन शायद मैं इसे एक विशिष्ट उदाहरण के साथ कह सकता हूं:

कहो, तुम एक हो, तो <table>साथ, <tr>, और फिर <td>। अब, मान लें कि आपने <td>तत्व के लिए 3 ईवेंट हैंडलर सेट किए हैं , फिर यदि आप अपने event.stopPropagation()द्वारा सेट किए गए पहले ईवेंट हैंडलर में करते हैं <td>, तो सभी ईवेंट हैंडलर <td>अभी भी चलेंगे , लेकिन ईवेंट केवल ( <tr>या नहीं) का प्रचार <table>नहीं करेगा बढ़ जाती हैं और अप करने के लिए <body>, <html>, document, और window)।

हालांकि, अब अगर आप का उपयोग event.stopImmediatePropagation()अपने पहले ईवेंट हैंडलर में, तो, के लिए अन्य दो ईवेंट हैंडलर्स <td>नहीं चलाने , और अप करने के लिए प्रचार नहीं करेंगे <tr>, <table>(और ऊपर नहीं जाएगी और अप करने के लिए <body>, <html>, document, और window)।

ध्यान दें कि यह सिर्फ के लिए नहीं है <td>। अन्य तत्वों के लिए, यह उसी सिद्धांत का पालन करेगा।

Answer 6

1) event.stopPropagation(): => इसका उपयोग केवल इसके संबंधित अभिभावक हैंडलर के निष्पादन को रोकने के लिए किया जाता है।

2) event.stopImmediatePropagation(): => इसका उपयोग इसके संबंधित अभिभावक हैंडलर के निष्पादन को रोकने के लिए किया जाता है और वर्तमान हैंडलर को छोड़कर स्वयं से जुड़ा हैंडलर या फ़ंक्शन भी किया जाता है। => यह संपूर्ण DOM के वर्तमान तत्व से जुड़े सभी हैंडलर को भी रोकता है।

यहाँ उदाहरण है: Jsfiddle !

धन्यवाद, -साहिल

Answer 7

event.stopPropagation () अन्य संचालकों को एक ही तत्व को निष्पादित करने की अनुमति देता है, जबकि event.stopImmediatePropagation () प्रत्येक ईवेंट को चलने से रोकता है। उदाहरण के लिए, नीचे jQuery कोड ब्लॉक देखें।

$("p").click(function(event)
{ event.stopImmediatePropagation();
});
$("p").click(function(event)
{ // This function won't be executed 
$(this).css("color", "#fff7e3");
});

अगर घटना .stopPropagation पिछले उदाहरण में उपयोग किया गया था, तो p तत्व पर अगला क्लिक ईवेंट जो css को बदल देगा, आग लग जाएगा, लेकिन यदि घटना में .stopImmediatePropagation () , तो अगला p क्लिक इवेंट आग नहीं देगा।

Answer 8

हैरानी की बात है, अन्य सभी जवाब केवल आधा सच कहते हैं या वास्तव में गलत हैं!

• e.stopImmediatePropagation() इस घटना के लिए किसी भी अन्य हैंडलर को बुलाया जाता है, कोई अपवाद नहीं है
• e.stopPropagation()समान है, लेकिन अभी भी इस चरण पर इस चरण के लिए सभी हैंडलर को कॉल करता है यदि पहले से ही नहीं बुलाया गया है

किस चरण में?

उदाहरण के लिए, एक क्लिक घटना हमेशा सबसे पहले DOM (जिसे "कैप्चर फेज" कहा जाता है) के नीचे तक जाएगी, अंत में घटना की उत्पत्ति ("टारगेट फेज") तक पहुंच जाएगी और फिर से बुलबुला ("बबल फेज") पर पहुंच जाएगी। और addEventListener()आप स्वतंत्र रूप से कैप्चर और बबल चरण दोनों के लिए कई हैंडलर पंजीकृत कर सकते हैं। (लक्ष्य चरण बिना भेद किए लक्ष्य पर दोनों प्रकार के हैंडलर कहते हैं।)

और यह वही है जिसके बारे में अन्य उत्तर गलत हैं:

• उद्धरण: "event.stopPropagation () एक ही तत्व पर अन्य संचालकों को निष्पादित करने की अनुमति देता है"
• सुधार: यदि कैप्चर चरण में रोक दिया जाता है, तो बुलबुला चरण हैंडलर कभी नहीं पहुंचेंगे, उन्हें उसी तत्व पर छोड़ दिया जाएगा
• उद्धरण: "event.stopPropagation () [...] का उपयोग इसके संबंधित अभिभावक हैंडलर के निष्पादन को रोकने के लिए किया जाता है"
• सुधार: यदि कैप्चर चरण में रोका जाता है, तो माता-पिता ही नहीं, लक्ष्य सहित किसी भी बच्चे पर हैंडलर को नहीं बुलाया जाता है

_{डेमो के साथ एक फिडेल और mozilla.org इवेंट चरण स्पष्टीकरण।}

Answer 9

यहाँ मैं stopPropagation vs stopImmediatePropagation के लिए अपना JSfiddle उदाहरण जोड़ रहा हूं। JSFIDDLE

let stopProp = document.getElementById('stopPropagation');
let stopImmediate = document.getElementById('stopImmediatebtn');
let defaultbtn = document.getElementById("defalut-btn");


stopProp.addEventListener("click", function(event){
	event.stopPropagation();
  console.log('stopPropagation..')
  
})
stopProp.addEventListener("click", function(event){
  console.log('AnotherClick')
  
})
stopImmediate.addEventListener("click", function(event){
		event.stopImmediatePropagation();
    console.log('stopimmediate')
})

stopImmediate.addEventListener("click", function(event){
    console.log('ImmediateStop Another event wont work')
})

defaultbtn.addEventListener("click", function(event){
    alert("Default Clik");
})
defaultbtn.addEventListener("click", function(event){
    console.log("Second event defined will also work same time...")
})

div{
  margin: 10px;
}

<p>
The simple example for event.stopPropagation and stopImmediatePropagation?
Please open console to view the results and click both button.
</p>
<div >
<button id="stopPropagation">
stopPropagation-Button
</button>
</div>
<div  id="grand-div">
  <div class="new" id="parent-div">
    <button id="stopImmediatebtn">
    StopImmediate
    </button>
  </div>
</div>
<div>
<button id="defalut-btn">
Normat Button
</button>
</div>