stopPropagation vs. stopImmediatePropagation

Apa perbedaan antara event.stopPropagation()dan event.stopImmediatePropagation()?

stopPropagationakan mencegah orang tua penangan dari yang dieksekusi stopImmediatePropagationakan mencegah penangan induk dan juga setiap lain penangan dari mengeksekusi

Contoh cepat dari dokumentasi 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>

Perhatikan bahwa urutan acara mengikat penting di sini!

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

Sebuah contoh kecil untuk menunjukkan bagaimana kedua propagasi ini berhenti bekerja.

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>

Ada tiga event handler yang terikat. Jika kita tidak menghentikan propagasi apa pun, maka harus ada empat peringatan - tiga pada div anak, dan satu pada div orangtua.

Jika kita menghentikan acara dari menyebarkan, maka akan ada 3 peringatan (semua di div anak batin). Karena acara tidak akan menyebarkan hierarki DOM, div induk tidak akan melihatnya, dan penangannya tidak akan diaktifkan.

Jika kami menghentikan propagasi segera, maka hanya akan ada 1 peringatan. Meskipun ada tiga event handler yang melekat pada div anak dalam, hanya 1 yang dieksekusi dan setiap propagasi selanjutnya dibunuh segera, bahkan dalam elemen yang sama.

Dari API jQuery :

Selain menjaga agar penangan tambahan pada elemen tidak dieksekusi, metode ini juga menghentikan gelembung dengan memanggil event.stopPropagation () secara implisit. Untuk mencegah agar acara tidak menggelegak ke elemen leluhur tetapi mengizinkan penangan acara lainnya untuk mengeksekusi pada elemen yang sama, kita bisa menggunakan event.stopPropagation () sebagai gantinya.

Gunakan event.isImmediatePropagationStopped () untuk mengetahui apakah metode ini pernah dipanggil (pada objek acara itu).

Singkatnya: event.stopPropagation()memungkinkan penangan lain pada elemen yang sama dieksekusi, sementara event.stopImmediatePropagation()mencegah setiap peristiwa dari berjalan.

event.stopPropagationakan mencegah penangan pada elemen induk berjalan.
Memanggil event.stopImmediatePropagationjuga akan mencegah penangan lain pada elemen yang sama berjalan.

Saya terlambat datang, tapi mungkin saya bisa mengatakan ini dengan contoh khusus:

Katakan, jika Anda memiliki <table>, dengan <tr>, dan kemudian <td>. Sekarang, katakanlah Anda menetapkan 3 pengendali event untuk <td>elemen, maka jika Anda melakukannya event.stopPropagation()pada pengendali event pertama yang Anda setel <td>, maka semua penangan event <td>akan tetap berjalan , tetapi event tidak akan menyebar ke <tr>atau <table>(dan tidak akan naik dan sampai <body>, <html>, document, dan window).

Sekarang, bagaimanapun, jika Anda menggunakan event.stopImmediatePropagation()dalam event handler pertama Anda, kemudian, dua event handler lainnya untuk <td>WILL NOT berjalan , dan tidak akan menyebarkan hingga <tr>, <table>(dan tidak akan naik dan sampai <body>, <html>, document, dan window).

Perhatikan bahwa ini bukan hanya untuk <td>. Untuk elemen lain, itu akan mengikuti prinsip yang sama.

1) event.stopPropagation(): => Digunakan untuk menghentikan eksekusi dari induknya saja.

2) event.stopImmediatePropagation(): => Digunakan untuk menghentikan eksekusi induknya yang sesuai dan juga pengendali atau fungsi yang melekat pada dirinya sendiri kecuali pengendali saat ini. => Ini juga menghentikan semua pawang yang melekat pada elemen saat ini dari seluruh DOM.

Berikut ini contohnya: Jsfiddle !

Terima kasih, -Mungkin

event.stopPropagation () memungkinkan penangan lain pada elemen yang sama untuk dieksekusi, sementara event.stopImmediatePropagation () mencegah setiap acara dari berjalan. Misalnya, lihat di bawah blok kode jQuery.

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

Jika event.stopPropagation digunakan dalam contoh sebelumnya, maka acara klik berikutnya pada elemen p yang mengubah css akan diaktifkan, tetapi jika case.stopImmediatePropagation () , acara p klik berikutnya tidak akan menyala.

Anehnya, semua jawaban lain hanya mengatakan setengah kebenaran atau sebenarnya salah!

• e.stopImmediatePropagation() menghentikan penangan lebih lanjut dipanggil untuk acara ini, tidak ada pengecualian
• e.stopPropagation()serupa, tetapi masih memanggil semua penangan untuk fase ini pada elemen ini jika belum dipanggil

Fase apa

Misalnya acara klik akan selalu terlebih dahulu berjalan turun ke DOM (disebut "fase penangkapan"), akhirnya mencapai asal acara ("fase target") dan kemudian melambung ke atas lagi ("fase gelembung"). Dan dengan addEventListener()Anda dapat mendaftarkan beberapa penangan untuk fase penangkapan dan fase gelembung secara mandiri. (Fase target memanggil penangan kedua jenis pada target tanpa membedakan.)

Dan inilah jawaban salah lainnya:

• kutipan: "event.stopPropagation () memungkinkan penangan lain pada elemen yang sama dieksekusi"
• koreksi: jika dihentikan pada fase penangkapan, penangan fase gelembung tidak akan pernah tercapai, juga melewatkannya pada elemen yang sama
• kutipan: "event.stopPropagation () [...] digunakan untuk menghentikan eksekusi hanya dari induknya yang menangani saja"
• koreksi: jika dihentikan pada fase penangkapan, penangan pada anak - anak, termasuk target tidak disebut, tidak hanya orang tua

_{Sebuah biola dan mozilla.org fase acara penjelasan dengan demo.}

Di sini saya menambahkan contoh JSfiddle saya untuk stopPropagation vs stopImmediatePropagation. 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>