Làm cách nào để dừng một sự kiện trong JavaScript?

 class="card" onclick="(Flip-over function)">
  
(Information)
 onclick="(Close function)">X

Ngày nay, chúng ta chủ yếu quan tâm đến một tính năng cụ thể của các sự kiện và cách kiểm soát nó. sự kiện bong bóng

Bong bóng sự kiện là gì?

Trước tiên chúng ta hãy thiết lập một ví dụ để hình dung Bong bóng sự kiện là gì và tác dụng của nó. Hãy tưởng tượng bạn đã giả định tạo một trang web có một số phần tử lồng nhau, mỗi phần tử có một trình lắng nghe sự kiện onclick được đính kèm với nó với một hiệu ứng khác nhau

 onclick="alert('I'm a div!')">
   onclick="alert('I'm a nested div!')">
     onclick="alert('I'm an h1 tag!')">
      Hello
    
  

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bây giờ, giả sử điều này được hiển thị trên trang và bạn quyết định nhấp vào thẻ

 class="card" onclick="(Flip-over function)">
  
(Information)
 onclick="(Close function)">X

Đầu tiên, cảnh báo cho thẻ

 class="card" onclick="(Flip-over function)">
  
(Information)
 onclick="(Close function)">X

 class="card" onclick="(Flip-over function)">
  
(Information)
   onclick="(Close function)">X

 class="card" onclick="(Flip-over function)">
  
(Information)
   onclick="(Close function)">X

Điều này xảy ra do Bong bóng sự kiện, một tính năng của JavaScript khiến mọi hành động hoặc tương tác trên một trang "nổi bong bóng" thông qua các phần tử kèm theo cho đến khi đến thư mục gốc của trang, áp dụng hành động tương tự đó cho bất kỳ trình xử lý sự kiện nào khác trên đường đi

Bong bóng sự kiện xảy ra trên hầu hết mọi sự kiện trong JavaScript và là một tính năng có chủ ý và mong muốn của ngôn ngữ vì nhiều lý do. Thông thường, nó thậm chí sẽ không thu hút được sự chú ý của nhà phát triển hoặc người dùng. Tuy nhiên, nếu có một dịp cụ thể mà chúng ta không muốn một sự kiện nổi lên thì sao?

Tại sao tôi không muốn các sự kiện nổi bong bóng?

Giả sử bạn đã tạo một ứng dụng có thẻ hiển thị thông tin liên quan cho người dùng. Trên mỗi thẻ, bạn đã thêm một trình xử lý sự kiện cho hiệu ứng onclick sẽ lật thẻ và hiển thị thêm thông tin

Ngoài ra, bạn đã thêm một nút sẽ xóa thẻ khỏi trang (vì bất kỳ lý do gì), nhắc người dùng xác nhận trước khi thực hiện, đây là một tính năng chính mà bạn không muốn thỏa hiệp

Chúng ta hãy xem nó trong (rất) mã đơn giản

 class="card" onclick="(Flip-over function)">
  
(Information)
 onclick="(Close function)">X

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Tất cả điều này sẽ hoạt động tốt, ngoại trừ thực tế là nếu bạn nhấp vào nút "X" để đóng thẻ, xác nhận sẽ bật lên nhưng thẻ cũng sẽ bị lật. Đây có thể không phải là một vấn đề lớn, nhưng nó có thể không hợp lý đối với cách bạn thiết kế thẻ;

Đây chính xác là loại tình huống mà bạn có thể muốn dừng sự kiện sủi bọt khiến cả hai sự kiện onclick bắt đầu tuần tự

Làm cách nào để chúng tôi dừng Sự kiện sủi bọt?

Rất may, câu trả lời khá đơn giản. Chúng tôi sử dụng một phương thức của giao diện Sự kiện có tên là stopPropagation()

Về cơ bản, stopPropagation() thực hiện những gì tên mô tả. nó ngăn chặn sự lan truyền của một sự kiện sủi bọt đi xa hơn lên trên cây các nguyên tố mà nó đang xảy ra trong

(Điều quan trọng cần lưu ý là stopPropagation() không ngăn hành động mặc định của một phần tử xảy ra. Để làm được điều đó, bạn sẽ cần một phương thức riêng gọi là preventDefault(). )

Hãy áp dụng điều này vào mã ví dụ của chúng ta và xem cách chúng ta có thể ngăn sự kiện onclick lan truyền. Vì chúng tôi vẫn muốn phần tử nút thực hiện tác dụng của nó và dừng ở đó, chúng tôi có thể bọc nó trong một phần tử nội tuyến như

 class="card" onclick="(Flip-over function)">
  
(Information)
 onclick="(Close function)">X

 class="card" onclick="(Flip-over function)">
  
(Information)
 onclick="event.stopPropagation()">
 onclick="(Close function)">X

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Và đó là tất cả để có nó. Giờ đây, bạn có thể nhấp vào nút và kích hoạt hiệu ứng của nó mà không cần chạm tới

 class="card" onclick="(Flip-over function)">
  
(Information)
 onclick="(Close function)">X

Điều đáng chú ý là phương pháp tương tự có thể được sử dụng trong các thư viện và Framework JavaScript khác như React. Đây là ví dụ tương tự sử dụng cú pháp JSX

<div className="card" onClick={"(Flip-over function)"}>
  <p>(Information)p>
  <span onClick={e => e.stopPropagation()}>
    <button onClick={"(Close function)"}>Xbutton>
  span>
div>

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Còn rất nhiều điều để tìm hiểu về Sự kiện, Bong bóng sự kiện và các phương pháp như stopPropagation(), vì vậy tôi khuyến khích bạn tìm hiểu sâu hơn và tìm thêm công cụ để cải thiện quá trình phát triển của mình. Đây là một hướng dẫn tương đối đơn giản về một khía cạnh rất phức tạp của JavaScript và luôn có nhiều điều để tìm hiểu. 😄

Làm cách nào để dừng các sự kiện trong js?

Làm cách nào để dừng sự kiện sủi bọt trong JavaScript?

Bạn sẽ dừng hành động mặc định của một sự kiện như thế nào?