stopPropagation ve stopImmediatePropagation karşılaştırması

314

Arasındaki fark nedir event.stopPropagation()ve event.stopImmediatePropagation()?

javascript jquery

— Arjun
kaynak

321

stopPropagationHerhangi engeller üst yürütülmesini işleyicileri stopImmediatePropagationbir üst işleyicileri engeller ve aynı zamanda herhangi bir başka yürütülmesini işleyicileri

Jquery dokümanlarından kısa bir örnek :

$("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>

Snippet'i genişlet

Olay bağlama sırasının burada önemli olduğunu unutmayın!

Kod snippet'ini göster

$("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>

Snippet'i genişlet

— Dave
kaynak

1

“Ebeveyn” i vurguluyorsunuz, ancak gerçekte yakalama aşamasında da çağrıldığında her ikisi de çocuklara girmeyi bırakıyor! Ayrıntılar için cevabıma bakın.

— Robert Siemer

57

Bu yayılma durmalarının her ikisinin de nasıl çalıştığını gösteren küçük bir örnek.

Kod snippet'ini göster

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>

Snippet'i genişlet

Bağlı üç olay işleyicisi vardır. Herhangi bir yayılımı durdurmazsak, dört uyarı olmalıdır - üç çocuk div'de ve bir ana div üzerinde.

Etkinliğin yayılmasını durdurursak, 3 uyarı olur (tümü iç alt div'da). Etkinlik DOM hiyerarşisini yaymayacağından, üst div bunu görmez ve işleyicisi tetiklenmez.

Yayılmayı derhal durdurursak, sadece 1 uyarı olacaktır. İç alt div'a bağlı üç olay işleyici olmasına rağmen, sadece 1 yürütülür ve aynı öğenin içinde bile başka herhangi bir yayılma hemen öldürülür.

— Anurag
kaynak

Her iki stopPropagation()değişken de DOM hiyerarşisinde ilerlemeyi durduracaktır. Sadece yukarı değil. Lütfen yakalama aşamasıyla ilgili ayrıntılar için cevabımı kontrol edin .

— Robert Siemer

26

Gönderen jQuery API :

Bu yöntem, bir öğedeki ek işleyicilerin yürütülmesini engellemenin yanı sıra, event.stopPropagation () öğesini dolaylı olarak çağırarak köpürmeyi de durdurur. Olayın ata öğelerine köpürmesini önlemek, ancak diğer olay işleyicilerinin aynı öğede yürütülmesine izin vermek için bunun yerine event.stopPropagation () öğesini kullanabiliriz.

Bu yöntemin çağrılıp çağrılmadığını (o olay nesnesinde) bilmek için event.isImmediatePropagationStopped () yöntemini kullanın.

Kısacası: herevent.stopPropagation() öğenin çalışmasını event.stopImmediatePropagation()engellerken aynı öğedeki diğer işleyicilerin yürütülmesine izin verir .

— Aron Rotteveel
kaynak

Sadece emin olmak için, yerel javascript sürümü event.stopImmediatePropagationkabarcıklanma durmuyor değil mi?

— Alexander Derck

Köpürme, olayın üst öğelere yayıldığı stopImmediatePropagation, olayın yayılma dönemini durdurduğu, her ikisinin de köpürmeyi önlemesi gerektiğinde, ilk olarak en dıştaki öğeleri tetikleyecek olan yakalama modunu değiştirebileceğiniz hiçbir şeye değmez ve ancak o zaman çocuklara inin (köpürme varsayılan ve ters yönde çalışır)

— JonnySerra

1

Az söylemek, kesin değil. Yakalama aşamasında durdurmak, cevabımda açıklandığı gibi aynı eleman üzerindeki kabarcık işleyicilerinin yürütülmesine izin vermez .

— Robert Siemer

23

event.stopPropagationüst öğelerdeki işleyicilerin çalışmasını engelleyecektir.
Arama event.stopImmediatePropagation, aynı öğedeki diğer işleyicilerin çalışmasını da önler.

— SLaks
kaynak

21

Belirtilmesi gereken, olay işleyicilerin öğeye eklendikleri sırayla yürütülmesidir.

— Felix Kling

18

Ben geç gelen biriyim, ama belki bunu belirli bir örnekle söyleyebilirim:

Söyle, eğer varsa <table>, ile <tr>ve sonra <td>. Şimdi, <td>öğe için 3 olay işleyicisi ayarladığınızı varsayalım , o event.stopPropagation()zaman ayarladığınız ilk olay işleyicisinde yaparsanız <td>, için tüm olay işleyicileri <td>çalışmaya devam eder , ancak etkinlik yalnızca <tr>veya öğesine yayılmaz ve <table>( yukarı çıkıp kadar <body>, <html>, document, ve window).

Eğer kullanırsanız Ancak şimdi, event.stopImmediatePropagation()ilk olay işleyicisi içinde, o zaman, diğer iki olay işleyicileri <td>İRADE DEĞİL çalıştırmak ve kadar yayılmaz <tr>, <table>(ve yukarı gitmeyecek ve kadar <body>, <html>, document, ve window).

Sadece bunun için olmadığını unutmayın <td>. Diğer elementler için aynı prensibi takip edecektir.

— nonopolarity
kaynak

10

1) event.stopPropagation(): => Yalnızca karşılık gelen ana işleyicinin yürütülmesini durdurmak için kullanılır.

2) event.stopImmediatePropagation(): => İlgili ana işleyicisinin ve geçerli işleyici hariç kendisine eklenmiş işleyicinin veya işlevin yürütülmesini durdurmak için kullanılır. => Tüm DOM öğesinin geçerli öğesine bağlı tüm işleyiciyi de durdurur.

İşte örnek: Jsfiddle !

Teşekkürler, -Sahil

— Sahil Kaşirwar
kaynak

3

event.stopPropagation () , aynı öğedeki diğer işleyicilerin yürütülmesine izin verirken event.stopImmediatePropagation () her olayın çalışmasını engeller. Örneğin, aşağıdaki jQuery kod bloğuna bakın.

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

Eğer Event.stopPropagation önceki örnekte kullanılan, sonra css ateş edeceği değiştirir, ancak bu durumda p elemanı sonraki tıklama etkinlik Event.stopImmediatePropagation () , bir sonraki p tıklama etkinlik yangın olmaz.

— Rahul Kumar
kaynak

2

Şaşırtıcı bir şekilde, diğer tüm cevaplar gerçeğin sadece yarısını söylüyor ya da aslında yanlış!

e.stopImmediatePropagation() bu olay için başka bir işleyicinin çağrılmasını engeller, istisna yok
e.stopPropagation()benzer, ancak yine de tüm işleyiciler sesleniyor bu aşamada üzerine bu elemanın zaten denilen değilse

Hangi aşama?

Örneğin, bir tıklama etkinliği her zaman önce DOM'a (“yakalama aşaması” denir) sonuna kadar gider, son olarak etkinliğin kaynağına ulaşır (“hedef aşaması”) ve sonra tekrar kabarır (“kabarcık aşaması”). Ayrıca, addEventListener()hem yakalama hem de kabarcık aşaması için bağımsız olarak birden fazla işleyici kaydedebilirsiniz. (Hedef aşaması, her iki türden de işleyiciyi ayırmadan çağırır.)

Ve bu diğer cevapların yanlış olduğu şey:

quote: “event.stopPropagation (), aynı öğedeki diğer işleyicilerin yürütülmesine izin verir”
düzeltme: yakalama aşamasında durdurulursa, kabarcık fazı işleyicilerine asla ulaşılamaz ve aynı öğede atlanır
quote: “event.stopPropagation () [...] yalnızca karşılık gelen üst işleyicinin yürütülmesini durdurmak için kullanılır”
düzeltme: yakalama aşamasında durdurulursa , hedef de dahil olmak üzere herhangi bir çocuktaki işleyiciler de yalnızca ebeveynler olarak adlandırılmaz

_{Demo ile bir keman ve mozilla.org olay aşaması açıklaması.}

— Robert Siemer
kaynak

1

Burada stopPropagation vs stopImmediatePropagation için JSfiddle örneğimi ekliyorum. 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>

Snippet'i genişlet

— Abhilash
kaynak