stopPropagation vs. stopImmediatePropagation

314

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

javascript jquery

— Arjun
sumber

321

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>

Luaskan cuplikan

Perhatikan bahwa urutan acara mengikat penting di sini!

Tampilkan cuplikan kode

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

Luaskan cuplikan

— Dave
sumber

1

Anda menekankan "orang tua", tetapi pada kenyataannya keduanya juga berhenti memasuki anak-anak juga jika dipanggil dalam fase penangkapan! Lihat jawaban saya untuk detailnya.

— Robert Siemer

57

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

Tampilkan cuplikan kode

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>

Luaskan cuplikan

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.

— Anurag
sumber

Kedua stopPropagation()varian juga akan berhenti merambat ke hierarki DOM. Bukan hanya sampai. Silakan periksa jawaban saya untuk detail dengan fase tangkap.

— Robert Siemer

26

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.

— Aron Rotteveel
sumber

Hanya untuk memastikan, versi javascript asli event.stopImmediatePropagationtidak berhenti menggelegak kan?

— Alexander Derck

Ya, menggelegak adalah ketika acara disebarkan ke elemen induk, stopImmediatePropagationmenghentikan acara dari periode yang diperbanyak, keduanya harus mencegah gelembung, tidak ada artinya bahwa Anda juga dapat mengubah mode untuk menangkap yang akan memicu elemen terluar terlebih dahulu dan baru kemudian turun ke anak-anak (menggelegak adalah default, dan bekerja dalam arah yang berlawanan)

— JonnySerra

1

Tidak tepat, untuk sedikitnya. Menghentikan fase penangkapan tidak akan memungkinkan penangan gelembung pada elemen yang sama dieksekusi seperti yang dijelaskan dalam jawaban saya.

— Robert Siemer

23

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

— Slaks
sumber

21

Layak disebutkan adalah bahwa penangan acara dieksekusi dalam urutan di mana mereka telah dilampirkan ke elemen.

— Felix Kling

19

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.

— nonopolaritas
sumber

10

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

— Sahil Kashetwar
sumber

3

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.

— Rahul Kumar
sumber

2

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.}

— Robert Siemer
sumber

1

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>

Luaskan cuplikan

— Abhilash
sumber