【Javascript】親要素onclickの中に子要素onclickを記述し、親要素のonclickイベントを発火させない

2023年2月5日

こんにちは！

今回は「Javascriptで親要素onclickの中に子要素onclickを記述し、誤発火を防ぐ方法」についてお伝えしたいと思います。

普通に親要素にonclickイベント、子要素にも別のonclickイベントを記述すると、子要素をクリックしたときに親要素のクリックイベントも発火してしまうので対策を示したいと思います。

子要素をクリックした時、親要素のonclickの誤発火を防ぐ方法

ポイント

event.stopPropagation()で親要素のonclickイベントを発火させない

まずは以下の具体例をご覧ください。
※わかりやすさ重視のため、一つのHTMLファイル内にcssとjavascriptも記述しております。

修正前のコード


<html>
  <head>
    <meta charset="utf-8">
    <title>Test</title>
    <style>
      .parent {
          background-color: pink;
      }
      .child {
          background-color: lightblue;
          width: 50%;
          height: 50%;
          margin: auto;
      }
    </style>
  </head>
  <body>
    <div class="parent" onclick="handleClickParent(event)" >
      親要素
      <div class="child" onclick="handleClickChild(event)" >
        子要素
      </div>
    </div>
    <script>
      const handleClickParent = (event) => {
        alert('親要素クリックイベントが呼ばれました');
      };
      const handleClickChild = (event) => {
        alert('子要素クリックイベントが呼ばれました');
      };
    </script>
  </body>
</html>

親要素

子要素

子要素をクリックすると、子要素のonclickイベントが呼ばれた後に親要素のonclickイベントが呼ばれていることがわかります。
これを防ぐために、子要素のonclickイベント処理内にevent.stopPropagation();を追加します。

修正後のコード


<html>
  <head>
    <meta charset="utf-8">
    <title>Test</title>
    <style>
      .parent {
          background-color: pink;
      }
      .child {
          background-color: lightblue;
          width: 50%;
          height: 50%;
          margin: auto;
      }
    </style>
  </head>
  <body>
    <div class="parent" onclick="handleClickParent(event)" >
      親要素
      <div class="child" onclick="handleClickChild(event)" >
        子要素
      </div>
    </div>
    <script>
      const handleClickParent = (event) => {
        alert('親要素クリックイベントが呼ばれました');
      };
      const handleClickChild = (event) => {
        event.stopPropagation(); // 追加
        alert('子要素クリックイベントが呼ばれました');
      };
    </script>
  </body>
</html>

親要素

子要素

これで子要素をクリックしたときに親要素のクリックイベントは呼ばれなくなりました！

以上、お疲れさまでした〜🍵