স্টপপ্রোগেশন বনাম স্টপআইমিডিয়েটপ্রোপেশন

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.stopImmediatePropagation()দেয় , যখন প্রতিটি ইভেন্ট চালানো থেকে বাধা দেয় ।

Comments

কেবল নিশ্চিত হতেই, এর স্থানীয় জাভাস্ক্রিপ্ট সংস্করণটি event.stopImmediatePropagationঠিক বুদ্বুদ বন্ধ করে না?

— আলেকজান্ডার ডার্ক

এটি করে, বুবলিং হল ইভেন্টটি যখন মূল উপাদানগুলিতে প্রচারিত হয়, stopImmediatePropagationইভেন্টটি প্রচারের সময় থেকে বিরত থাকে, তাদের উভয়েরই বুদবুদ প্রতিরোধ করা উচিত, এটি ক্যাপচার করার মোডটিও পরিবর্তন করতে পারে যা আপনি প্রথমে বহিরাগত উপাদানগুলিকে ট্রিগার করতে পারবেন এমন কোনও মূল্য নেই and শুধুমাত্র তারপর যেতে নিচে শিশুদের (সাড়া জাগানো ডিফল্ট, এবং বিপরীত দিকে কাজ করে)

— JonnySerra

সঠিক না, কমপক্ষে বলতে। ক্যাপচার পর্যায়ে বন্ধ হবে অনুমতি দেয় না হিসাবে একই উপাদান বুদ্বুদ হ্যান্ডেলার নিষ্পন্ন করা হবে আমার উত্তর ব্যাখ্যা।

— রবার্ট সিমার

Answer 4

event.stopPropagationঅভিভাবক উপাদানগুলিতে হ্যান্ডলারগুলি চালানো থেকে বিরত রাখবে।
কলিং event.stopImmediatePropagationএকই উপাদানটির অন্যান্য হ্যান্ডলারগুলি চলমান থেকে বাধা দেবে।

Comments

উল্লেখযোগ্য তা হল যে ইভেন্ট হ্যান্ডলারগুলি ক্রম অনুযায়ী কার্যকর করা হয় যাতে তারা উপাদানটির সাথে সংযুক্ত থাকে।

— ফেলিক্স ক্লিং

Answer 5

আমি দেরীতে আগত, তবে একটি নির্দিষ্ট উদাহরণ দিয়ে আমি এটি বলতে পারি:

বলুন, যদি আপনার <table>সাথে থাকে <tr>তবে এবং তারপর <td>। এখন, চল জন্য 3 ইভেন্ট হ্যান্ডলার সেট বলে <td>উপাদান, তারপর যদি আপনি না 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(): => এটি বর্তমানে সম্পর্কিত হ্যান্ডলার বাদে তার সাথে সম্পর্কিত প্যারেন্ট হ্যান্ডলারের কার্য সম্পাদন এবং নিজের সাথে সংযুক্ত হ্যান্ডলার বা ফাংশনটি থামাতে ব্যবহৃত হয়। => এটি পুরো ডিওএমের বর্তমান উপাদানটির সাথে সংযুক্ত সমস্ত হ্যান্ডলারটি বন্ধ করে দেয়।

এখানে উদাহরণ: জেসফিডাল !

ধন্যবাদ, -সাহিল

Answer 7

ইভেন্ট.স্টপপ্রপাগেশন () একই উপাদানটির অন্যান্য হ্যান্ডলারের মৃত্যুদন্ড কার্যকর করার অনুমতি দেয় , যখন ইভেন্ট.স্টপআইমিডিয়েটপ্রোপেশন () প্রতিটি ইভেন্টকে চলমান থেকে বাধা দেয়। উদাহরণস্বরূপ, নীচে jQuery কোড ব্লক দেখুন।

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

পূর্ববর্তী উদাহরণে যদি ইভেন্ট.স্টপপ্রোপেশন ব্যবহার করা হয়, তবে পি এলিমেন্টের পরবর্তী ক্লিক ইভেন্টে CSS পরিবর্তিত হবে তবে ইভেন্ট.স্টপআইমিডিয়েটপ্রোপেশন () এর ক্ষেত্রে , পরবর্তী পি ক্লিক ইভেন্টটি আগুন নেবে না।

Answer 8

আশ্চর্যের বিষয়, অন্যান্য সমস্ত উত্তর কেবল অর্ধেক সত্য বলে বা আসলে ভুল!

• e.stopImmediatePropagation() এই ইভেন্টের জন্য ডাকা হওয়া থেকে কোনও হ্যান্ডলারকে থামায়, কোনও ব্যতিক্রম নেই
• e.stopPropagation()অনুরূপ, কিন্তু এখনও সব হ্যান্ডেলার কল করে এই পর্যায়ে উপর এই উপাদান যদি ইতিমধ্যে বলা হয় না

কোন পর্ব?

উদাহরণস্বরূপ, ক্লিকের ইভেন্টটি সর্বদা সর্বদা DOM এর নীচে চলে যাবে (যাকে "ক্যাপচার ফেজ" বলা হয়), অবশেষে ইভেন্টের উত্সে পৌঁছায় ("টার্গেট ফেজ") এবং তারপরে আবার বুদবুদ ("বুদ্বুদ পর্যায়")। এবং এর সাহায্যে addEventListener()আপনি স্বাধীনভাবে ক্যাপচার এবং বুদ্বুদ ফেজ উভয়ের জন্য একাধিক হ্যান্ডলারের নিবন্ধন করতে পারেন। (লক্ষ্য পর্যায়ে উভয় প্রকারের হ্যান্ডলারকে লক্ষ্য ছাড়াই কল করে calls

এবং অন্যান্য উত্তরগুলি সম্পর্কে এটি ভুল:

• উদ্ধৃতি: "ইভেন্ট.স্টপপ্রপাগেশন () একই উপাদানটির অন্যান্য হ্যান্ডলারের মৃত্যুদণ্ড কার্যকর করার অনুমতি দেয়"
• সংশোধন: ক্যাপচার পর্বে বন্ধ হয়ে গেলে, বুদ্বুদ ফেজ হ্যান্ডলারগুলি কখনই পৌঁছাতে পারে না, একই উপাদানকে এড়িয়েও যায়
• উক্তি: "ইভেন্ট.স্টপপ্রপাগেশন () [...] কেবলমাত্র তার সাথে সম্পর্কিত প্যারেন্ট হ্যান্ডলারের ফাঁসি বন্ধ করতে ব্যবহৃত হয়"
• সংশোধন: ক্যাপচার পর্বে বন্ধ হয়ে গেলে, লক্ষ্যমাত্রাসহ কোনও বাচ্চার হ্যান্ডলারের নামমাত্র অভিভাবকরা নয়, ডাকা হয় না

_{ডেমো সহ একটি ফিজল এবং mozilla.org ইভেন্ট পর্বের ব্যাখ্যা।}

Answer 9

এখানে আমি স্টপআইপিয়েটেড বনাম স্টপআইমিডিয়েট্রোপ্যাগেশনের জন্য আমার জেএসফিডাল উদাহরণ যুক্ত করছি। 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>