【javascript】子要素をクリックした時に親要素へ影響させないstopPropagation()

投稿日 : 2022年01月29日 更新日 :

子要素クリックすると親要素まで影響

  const dir1 = document.querySelector(".dir1");
  const dir2 = document.querySelector(".dir2");
  const dir3 = document.querySelector(".dir3");

  dir1.addEventListener("click", function(){
    dir1.classList.toggle("active");
  });
  dir2.addEventListener("click", function(){
    dir2.classList.toggle("active");
  });
  dir3.addEventListener("click", function(){
    dir3.classList.toggle("active");
  });

親要素に影響させない stopPropagation()

  dir1.addEventListener("click", function(){
    dir1.classList.toggle("active");
  });
  // e を忘れないように‼
  dir2.addEventListener("click", function(e){  
    e.stopPropagation(); //  ポイント‼
    dir2.classList.toggle("active");
  });
  // e を忘れないように‼
  dir3.addEventListener("click", function(e){  
    e.stopPropagation(); //  ポイント‼
    dir3.classList.toggle("active");
  });

onclickを使った書き方

  <!--親要素-->
  <div class="dir1" onclick="isClicked(event,this)">
    <!--子要素-->
    <div class="dir2" onclick="isClicked(event,this)">
      <!--孫要素-->
      <div class="dir3" onclick="isClicked(event,this)">
    </div>
  </div>

  function isClicked(e,obj){
      e.stopPropagation(); 
      obj.classList.toggle("active")
  }

参考

【javascript】onclickの書き方と使い方 クリックした値を取得する

【javascript】階層ツリーをCSSとjavascriptで作ってみた

まとめ