HTML DOM stopPropagation() 事件方法

HTML DOM stopPropagation() 事件方法用于停止给定元素的传播。这意味着单击父元素不会传播到子元素中，使用 stopPropagtion() 方法单击子元素也不会传播到父元素中。事件传播也称为事件冒泡。

语法

以下是在 stopPropagation() 事件方法中： -

event.stopPropagation()

示例

让我们看一个 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://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>