Event.stopPropagation() trong JavaScript giúp ích gì cho chúng ta?

Chào mọi người, chắc hẳn trong quá trình code JavaScript - tương tác DOM, khi thêm các event (sự kiện) cho element, chúng ta có thể đã gặp một trường hợp khi click vào phần tử con (child element) thì phần tử cha (parent element) cũng được kích hoạt. Điều này dẫn đến một số kết quả không như mong muốn 😅.

Làm thế nào để khi click vào phần tử con thì chỉ hàm xử lý event của phần tử này được kích hoạt? trong bài viết này chúng ta sẽ cùng tìm hiểu cách làm thông qua method Event.stopPropagation() trong JavaScript nhé!

Event.stopPropagation() JavaScript

Để hiểu tại sao lại xảy ra vấn đề mình đã nói ở trên thì các bạn có thể tìm hiểu về khái niệm Event Bubbling và Capturing trong JavaScript.

Trong hầu hết các trường hợp, các event thường tuân theo nguyên tắc Bubbling, hiểu đơn giản là khi một event xảy ra trên một element, đầu tiên, nó sẽ chạy các handlers trên element đó, sau đó đến parent element của nó, rồi chạy lên các phần tử có cấp lớn hơn (ancestors).

Các bạn có thể coi ví dụ bên dưới:

<div class="modal">
  <div class="modal-dialog">
    <div class="modal-header">
      <h2>Posts</h2>
      <button class="action">Action</button>
    </div>
    <div class="modal-body">
      <a href="https://homiedev.com/hoc-javascript-co-ban"
         >Học JavaScript cơ bản - homiedev.com</a
        >
    </div>
  </div>
</div>
<div class="wrap"><button class="btn btn-big btn-show">Modal!</button></div>

Ở ví dụ này, mình sẽ tạo một modal và thêm các event click cho các element. Thêm code JavaScript dưới đây và xem kết quả nhé.

const btnActionEle = document.querySelector(".action");
const modalEle = document.querySelector(".modal");
const btnShowEle = document.querySelector(".btn-show");

btnShowEle.addEventListener("click", function (e) {
  modalEle.classList.add("active");
});

btnActionEle.addEventListener("click", function (e) {
  window.alert("button.action clicked");
});

modalEle.addEventListener("click", function (e) {
  window.alert("div.modal clicked");
  this.classList.remove("active");
});

Bây giờ thử click vào button.btn-show, một modal sẽ xuất hiện và cùng xem vấn đề ở đây là gì nhé 😀.

Như các bạn thấy, khi mình click vào button.action, alert sẽ hiện lên và sau đó hàm xử lý event của div.modal cũng được được kích hoạt vì nó là element chứa button.action. Đây là do nguyên tắc Bubbling mình đã nói ở đầu bài viết.

Để tránh vấn đề này các bạn có thể thêm Event.stopPropagation() vào hàm xử lý event click của button.action, lúc này khi click vào button.action, nó sẽ dừng kích hoạt hàm xử lý event của parent.

const btnActionEle = document.querySelector(".action");
const modalEle = document.querySelector(".modal");
const btnShowEle = document.querySelector(".btn-show");

btnShowEle.addEventListener("click", function (e) {
  modalEle.classList.add("active");
});

btnActionEle.addEventListener("click", function (e) {
  e.stopPropagation();

  window.alert("button.action clicked");
});

modalEle.addEventListener("click", function (e) {
  window.alert("div.modal clicked");
  this.classList.remove("active");
});

Lúc này, vấn đề đã được giải quyết 😁, các bạn có thể thao tác thử tại đây.

Hi vọng qua bài viết này, các bạn có thể hiểu hơn về method Event.stopPropagation() trong JavaScript, có nhiều cách để giải quyết một vấn đề, các bạn có thể sử dụng cách này cũng khá nhanh gọn. Trong quá trình code các bạn có thể khám phá ra những cách mới. Chúng ta có thể chia sẻ những cách làm hay hơn bên dưới phần bình luận nhé.

Chúc các bạn học tốt!