stopPropagation so với stopImmediatePropagation

314

Sự khác biệt giữa event.stopPropagation()và là event.stopImmediatePropagation()gì?

javascript jquery

— Arjun
nguồn

321

stopPropagationsẽ ngăn bất kỳ trình xử lý cha mẹ nào được thực thi stopImmediatePropagationsẽ ngăn bất kỳ trình xử lý cha mẹ nào và bất kỳ trình xử lý nào khác thực thi

Ví dụ nhanh từ tài liệu 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>

Mở rộng đoạn trích

Lưu ý rằng thứ tự của ràng buộc sự kiện là quan trọng ở đây!

Hiển thị đoạn mã

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

Mở rộng đoạn trích

— Dave
nguồn

1

Bạn nhấn mạnh vào cha mẹ, nhưng trong thực tế, cả hai cũng dừng lại ở trẻ em nếu được gọi trong giai đoạn bắt giữ! Xem câu trả lời của tôi để biết chi tiết.

— Robert Siemer

57

Một ví dụ nhỏ để chứng minh làm thế nào cả hai điểm dừng lan truyền này hoạt động.

Hiển thị đoạn mã

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>

Mở rộng đoạn trích

Có ba xử lý sự kiện ràng buộc. Nếu chúng ta không dừng bất kỳ sự lan truyền nào, thì sẽ có bốn cảnh báo - ba trên div con và một trên div cha.

Nếu chúng ta ngăn sự kiện lan truyền, thì sẽ có 3 cảnh báo (tất cả nằm trên div con bên trong). Vì sự kiện sẽ không truyền bá hệ thống phân cấp DOM, nên cha mẹ sẽ không thấy nó và trình xử lý của nó sẽ không kích hoạt.

Nếu chúng ta ngừng nhân giống ngay lập tức, thì sẽ chỉ có 1 cảnh báo. Mặc dù có ba trình xử lý sự kiện được gắn vào div con bên trong, chỉ có 1 được thực thi và bất kỳ sự lan truyền nào khác sẽ bị giết ngay lập tức, ngay cả trong cùng một phần tử.

— Anurag
nguồn

Cả hai stopPropagation()biến thể cũng sẽ ngừng truyền xuống hệ thống phân cấp DOM. Không chỉ lên. Vui lòng kiểm tra câu trả lời của tôi để biết chi tiết với giai đoạn chụp.

— Robert Siemer

26

Từ API jQuery :

Ngoài việc giữ cho bất kỳ trình xử lý bổ sung nào trên một phần tử không được thực thi, phương thức này cũng ngăn chặn hiện tượng sủi bọt bằng cách gọi ngầm event.stopPropagation (). Để đơn giản ngăn sự kiện sủi bọt vào các phần tử tổ tiên nhưng cho phép các trình xử lý sự kiện khác thực thi trên cùng một phần tử, chúng ta có thể sử dụng event.stopPropagation ().

Sử dụng event.isImmediatePropagationStopped () để biết liệu phương thức này có được gọi hay không (trên đối tượng sự kiện đó).

Tóm lại: event.stopPropagation()cho phép các trình xử lý khác trên cùng một phần tử được thực thi, trong khi event.stopImmediatePropagation()ngăn mọi sự kiện chạy.

— Aron Rotteveel
nguồn

Để chắc chắn, phiên bản javascript gốc event.stopImmediatePropagationkhông ngừng sủi bọt phải không?

— Alexander Derck

Nó cũng vậy, sủi bọt là khi sự kiện được truyền đến các phần tử cha, stopImmediatePropagationngăn sự kiện không được lan truyền, cả hai sẽ ngăn chặn sự sủi bọt, không có gì thay đổi khi bạn cũng có thể thay đổi chế độ để bắt các phần tử ngoài cùng trước và chỉ sau đó đi xuống cho trẻ em (bong bóng là mặc định và hoạt động theo hướng ngược lại)

— JonnySerra

1

Không chính xác, để nói rằng ít nhất. Dừng trong giai đoạn chụp sẽ không cho phép xử lý bong bóng trên cùng một phần tử được thực thi như được giải thích trong câu trả lời của tôi.

— Robert Siemer

23

event.stopPropagationsẽ ngăn chặn các trình xử lý trên các phần tử cha chạy.
Gọi event.stopImmediatePropagationcũng sẽ ngăn các trình xử lý khác trên cùng một phần tử chạy.

— SLaks
nguồn

21

Đáng nói là các trình xử lý sự kiện được thực hiện theo thứ tự mà chúng đã được gắn vào phần tử.

— Felix Kling

18

Tôi là một người đến muộn, nhưng có lẽ tôi có thể nói điều này với một ví dụ cụ thể:

Nói, nếu bạn có một <table>, với <tr>, và sau đó <td>. Bây giờ, giả sử bạn đặt 3 trình xử lý sự kiện cho <td>phần tử, sau đó nếu bạn thực hiện event.stopPropagation()trong trình xử lý sự kiện đầu tiên mà bạn đã đặt <td>, thì tất cả các trình xử lý sự kiện <td>sẽ vẫn chạy , nhưng sự kiện sẽ không lan truyền đến <tr>hoặc <table>(và sẽ không đi lên và lên đến <body>, <html>, document, vàwindow ).

Bây giờ, tuy nhiên, nếu bạn sử dụng event.stopImmediatePropagation()trong xử lý sự kiện đầu tiên của bạn, sau đó, hai xử lý sự kiện khác để <td>sẽ không chạy , và sẽ không lan truyền đến <tr>, <table>(và sẽ không đi lên và lên đến <body>, <html>, document, vàwindow ).

Lưu ý rằng nó không chỉ dành cho <td>. Đối với các yếu tố khác, nó sẽ theo cùng một nguyên tắc.

— không cực
nguồn

10

1) event.stopPropagation(): => Nó chỉ được sử dụng để dừng thực thi trình xử lý cha mẹ tương ứng.

2) event.stopImmediatePropagation(): => Nó được sử dụng để dừng việc thực thi trình xử lý cha mẹ tương ứng của nó và cũng là trình xử lý hoặc chức năng gắn liền với chính nó ngoại trừ trình xử lý hiện tại. => Nó cũng dừng tất cả trình xử lý được gắn vào phần tử hiện tại của toàn bộ DOM.

Dưới đây là ví dụ: Jsfiddle !

Cảm ơn, -Silil

— Sahil Kashetwar
nguồn

3

event.stopPropagation () cho phép các trình xử lý khác trên cùng một phần tử được thực thi, trong khi event.stopImmediatePropagation () ngăn mọi sự kiện chạy. Ví dụ, xem khối mã jQuery bên dưới.

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

Nếu event.stopPropagation đã được sử dụng trong ví dụ trước, thì sự kiện nhấp tiếp theo trên phần tử p làm thay đổi css sẽ kích hoạt, nhưng trong trường hợp event.stopImmediatePropagation () , sự kiện p click tiếp theo sẽ không kích hoạt.

— La Mã
nguồn

2

Đáng ngạc nhiên, tất cả các câu trả lời khác chỉ nói một nửa sự thật hoặc thực sự sai!

e.stopImmediatePropagation() ngăn chặn bất kỳ xử lý tiếp theo được gọi cho sự kiện này, không có ngoại lệ
e.stopPropagation()là tương tự, nhưng vẫn gọi tất cả các trình xử lý cho giai đoạn này trên phần tử này nếu chưa được gọi

Giai đoạn nào?

Ví dụ: một sự kiện nhấp chuột sẽ luôn luôn đi xuống DOM (được gọi là Giai đoạn bắt giữ giai đoạn), cuối cùng cũng đến nguồn gốc của sự kiện (mục tiêu pha Pha) và sau đó nổi lên một lần nữa (bong bóng pha Pha). Và với addEventListener()bạn có thể đăng ký nhiều trình xử lý cho cả giai đoạn chụp và bong bóng một cách độc lập. (Pha đích gọi các trình xử lý của cả hai loại trên mục tiêu mà không phân biệt.)

Và đây là những gì các câu trả lời khác không chính xác về:

trích dẫn: sự kiện.stopPropagation () cho phép các trình xử lý khác trên cùng một phần tử được thực thi
hiệu chỉnh: nếu dừng trong pha chụp, trình xử lý pha bong bóng sẽ không bao giờ đạt được, đồng thời bỏ qua chúng trên cùng một phần tử
trích dẫn: sự kiện.stopPropagation () [...] được sử dụng để dừng thực thi trình xử lý cha mẹ tương ứng của nó
sửa lỗi: nếu dừng trong giai đoạn bắt giữ, xử lý bất kỳ đứa trẻ nào , kể cả mục tiêu không được gọi, không chỉ cha mẹ

_{Một lời giải thích giai đoạn sự kiện fiddle và mozilla.org với bản demo.}

— Robert Siemer
nguồn

1

Ở đây tôi đang thêm ví dụ về JSfiddle của mình cho stopPropagation so với stopImmediatePropagation. NHANH CHÓNG

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>

Mở rộng đoạn trích

— Hhhash
nguồn