stopPropagation เทียบกับ stopImmediatePropagation

ความแตกต่างระหว่างevent.stopPropagation()และevent.stopImmediatePropagation()คืออะไร

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>

ตัวอย่างเล็ก ๆ เพื่อแสดงให้เห็นว่าการหยุดการเผยแพร่ทั้งสองทำงานอย่างไร

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 รายการ (ทั้งหมดอยู่ใน div ลูกด้านใน) เนื่องจากเหตุการณ์จะไม่เผยแพร่ในลำดับชั้นของ DOM ผู้ปกครองหลักจะไม่เห็นและตัวจัดการจะไม่เริ่มทำงาน

หากเราหยุดการเผยแพร่ทันทีจะมีการแจ้งเตือนเพียง 1 ครั้งเท่านั้น แม้ว่าจะมีตัวจัดการเหตุการณ์สามตัวที่แนบมากับลูกย่อยด้านใน แต่จะดำเนินการเพียง 1 ตัวเท่านั้นและการแพร่กระจายอื่น ๆ จะถูกฆ่าในทันทีแม้ในองค์ประกอบเดียวกัน

จากjQuery API :

นอกเหนือจากการป้องกันตัวจัดการเพิ่มเติมใด ๆ ในองค์ประกอบจากการดำเนินการวิธีนี้ยังหยุดเดือดโดยการเรียกเหตุการณ์ impl.lyopstopPropagation () โดยปริยาย เพื่อป้องกันเหตุการณ์จากการเดือดปุด ๆ ไปยังองค์ประกอบที่บรรพบุรุษ แต่อนุญาตให้ตัวจัดการเหตุการณ์อื่นทำงานบนองค์ประกอบเดียวกันเราสามารถใช้ event.stopPropagation () แทน

ใช้ event.isImmediatePropagationStopped () เพื่อทราบว่าวิธีนี้เคยถูกเรียก (บนวัตถุเหตุการณ์นั้น)

ในระยะสั้น: event.stopPropagation()ช่วยให้ตัวจัดการอื่น ๆ ในองค์ประกอบเดียวกันที่จะดำเนินการในขณะที่event.stopImmediatePropagation()ป้องกันไม่ให้ทุกเหตุการณ์จากการทำงาน

event.stopPropagationจะป้องกันตัวจัดการกับองค์ประกอบหลักไม่ให้ทำงาน
การโทรevent.stopImmediatePropagationจะป้องกันตัวจัดการอื่น ๆ ในองค์ประกอบเดียวกันไม่ให้ทำงาน

ฉันเป็นผู้มาสาย แต่บางทีฉันสามารถพูดแบบนี้กับตัวอย่างที่เฉพาะเจาะจง:

บอกว่าถ้าคุณมี<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>โปรดทราบว่ามันไม่ได้เป็นเพียง สำหรับองค์ประกอบอื่น ๆ มันจะเป็นไปตามหลักการเดียวกัน

1) event.stopPropagation(): => มันถูกใช้เพื่อหยุดการประมวลผลของ parent parent ที่เกี่ยวข้องเท่านั้น

2) event.stopImmediatePropagation(): => มันถูกใช้เพื่อหยุดการดำเนินการของ parent handler ที่เกี่ยวข้องและ handler หรือฟังก์ชั่นที่แนบมากับตัวเองยกเว้น handler ปัจจุบัน => นอกจากนี้ยังหยุดตัวจัดการทั้งหมดที่แนบกับองค์ประกอบปัจจุบันของ DOM ทั้งหมด

นี่คือตัวอย่าง: Jsfiddle !

ขอบคุณ -Sahil

event.stopPropagation ()ช่วยให้ตัวจัดการอื่น ๆ ในองค์ประกอบเดียวกันที่จะดำเนินการในขณะที่event.stopImmediatePropagation ()ป้องกันไม่ให้ทุกเหตุการณ์จากการทำงาน ตัวอย่างเช่นดูด้านล่างบล็อกรหัส jQuery

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

ถ้าevent.stopPropagationถูกใช้ในตัวอย่างก่อนหน้าเหตุการณ์การคลิกถัดไปบนองค์ประกอบ p ที่เปลี่ยนแปลง css จะเริ่มทำงาน แต่ในกรณีevent.stopImmediatePropagation ()เหตุการณ์ p คลิกถัดไปจะไม่เริ่มทำงาน

น่าแปลกที่คำตอบอื่น ๆทั้งหมดพูดเพียงครึ่งหนึ่งของความจริงหรือผิดจริง!

• e.stopImmediatePropagation() หยุดตัวจัดการเพิ่มเติมใด ๆ จากการถูกเรียกสำหรับเหตุการณ์นี้ไม่มีข้อยกเว้น
• e.stopPropagation()จะคล้ายกัน แต่ไม่ยังคงเรียกรถยกทุกขั้นตอนนี้ในองค์ประกอบนี้หากไม่ได้เรียกแล้ว

เฟสอะไร

เช่นเหตุการณ์การคลิกมักจะไปตลอดทางจนถึง DOM (เรียกว่า "ขั้นตอนการจับ") ในที่สุดก็มาถึงจุดเริ่มต้นของเหตุการณ์ ("เป้าหมายระยะ") จากนั้นก็เพิ่มขึ้นอีกครั้ง ("ระยะฟอง") และด้วยaddEventListener()คุณสามารถลงทะเบียนเครื่องจัดการหลายตัวสำหรับทั้งการจับและระยะฟองอิสระ (ระยะเป้าหมายเรียกเครื่องมือจัดการของทั้งสองชนิดบนเป้าหมายโดยไม่แยกความแตกต่าง)

และนี่คือสิ่งที่คำตอบอื่น ๆ ไม่ถูกต้องเกี่ยวกับ:

• อ้างถึง:“ event.stopPropagation () ช่วยให้ตัวจัดการอื่น ๆ ในองค์ประกอบเดียวกันที่จะดำเนินการ”
• การแก้ไข: หากหยุดในระยะการดักจับจะไม่ถึงตัวจัดการเฟสของบับเบิลรวมถึงการข้ามไปยังองค์ประกอบเดียวกัน
• อ้างถึง:“ event.stopPropagation () [... ] ใช้เพื่อหยุดการประมวลผลตัวจัดการพาเรนต์ที่เกี่ยวข้องเท่านั้น”
• การแก้ไข: หากหยุดทำงานในช่วงการดักจับตัวจัดการกับลูก ๆ รวมถึงเป้าหมายจะไม่ถูกเรียกเช่นกันไม่ใช่เฉพาะผู้ปกครองเท่านั้น

_{ซอและ mozilla.org เฟสเหตุการณ์คำอธิบายกับการสาธิต}

ที่นี่ฉันกำลังเพิ่มตัวอย่าง JSfiddle ของฉันสำหรับ 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>