Phương thức sự kiện HTML DOM stopPropagation ()

Phương thức sự kiện HTML DOM stopPropagation () được sử dụng để dừng truyền phần tử đã cho. Điều này có nghĩa là việc nhấp vào phần tử gốc sẽ không phổ biến cho trẻ em và nhấp vào phần tử con sẽ không phổ biến cho phần tử cha mẹ bằng cách sử dụng phương thức stopPropagtion (). Sự lan truyền sự kiện còn được gọi là sự kiện sôi sục.

Cú pháp

Sau đây là cú pháp cho phương thức sự kiện stopPropagation () -

event.stopPropagation()

Ví dụ

Chúng ta hãy xem ví dụ về phương thức sự kiện stopPropagation () -

<!DOCTYPE html>
<html>
<head>
<style>
   #DIV_1 {
      background: lightpink;
      width:130px;
      height:130px;
      margin-left:40%;
      text-align:center;
   }
   #IMG_1 {
      width:100px;
      height:100px;
      position:relative;
      left:5px;
   }
</style>
</head>
<body>
<h1>stopPropagation() method example</h1>
<div id="DIV_1" onclick="OuterDiv()">
DIV ELEMENT
<img onclick="InnerImg(event)" id="IMG_1" src="https://www.tutorialspoint.com/hibernate/images/hibernate-mini-logo.jpg">
</div>
Stop propagation:
<input type="checkbox" id="check">
<script>
   function InnerImg(event) {
      confirm("Inner Image is clicked");
      if (document.getElementById("check").checked) {
         event.stopPropagation();
      }
   }
   function OuterDiv() {
      confirm("Outer div is clicked");
   }
</script>
</body>
</html>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

Phương thức sự kiện HTML DOM stopPropagation ()

Khi nhấp vào phần tử Hình ảnh bên trong phần tử div mà không nhấp trước vào phương pháp truyền dừng -

Phương thức sự kiện HTML DOM stopPropagation ()

Khi nhấp vào “Ok” ở trên -

Phương thức sự kiện HTML DOM stopPropagation ()

Khi chọn hộp kiểm ngừng lan truyền và sau đó nhấp vào hình ảnh bên trong -

Phương thức sự kiện HTML DOM stopPropagation ()