HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

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://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>

出力

これにより、次の出力が生成されます-

HTML DOM stopPropagation（）イベントメソッド

最初に伝播停止方法をクリックせずに、div要素内のImage要素をクリックすると-

HTML DOM stopPropagation（）イベントメソッド

上の[OK]をクリックすると-

HTML DOM stopPropagation（）イベントメソッド

[伝播の停止]チェックボックスをオンにしてから、内側の画像をクリックすると-

HTML DOM stopPropagation（）イベントメソッド


  1. HTMLDOMtouchcancelイベント

    HTML DOM touchcancelイベントは、1つ以上のタッチイベントが中断されたときにトリガーされます。 注：このイベントはタッチデバイスのみを対象としています。 以下は構文です- HTMLでtouchcancelイベントをトリガーする- ontouchcancel = "eventFunction()" JavaScriptでtouchcancelイベントをトリガーする- eventObject.ontouchcancel = eventFunction touchcancelイベントの例を見てみましょう プロパティ- 例 <!DOCTYPE ht

  2. HTMLDOMタッチスタートイベント

    タッチスクリーンがタッチされるとHTMLDOMタッチスタートイベントがトリガーされます。 注 −このイベントはタッチデバイスのみを対象としています。 以下は構文です- HTMLでタッチスタートイベントをトリガーする- ontouchstart = "eventFunction()" JavaScriptでタッチスタートイベントをトリガーする- eventObject.ontouchstart = eventFunction 注 −モバイルまたはタッチアクセスのあるシステムでアクセスされるオンラインHTMLエディターでタッチイベントの例を実行しました。これは、画面を2秒間