JavaScript / TypeScript / jQuery

【JavaScript】 子要素のオンクリックイベントを無効にする

カレー

JavaScriptで位置が被っている他要素のオンクリックイベントが邪魔だったので
干渉しないようにしたときのメモ

例えば

要素をクリックした場合にアラート表示するコードがあった場合

  • sample.html
<div id="js-alert-1">
  <button id="js-child-1">子要素</button>
</div>

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script>
$(function() {
  $('#js-alert-1').click(function() {
    alert('親要素がクリックされたよ！')
  })
  $('#js-child-1').click(function() {
    alert('子要素がクリックされたよ！')
  })
});
</script>

<style>
#js-alert-1 {
  background: #ccc;
  padding: 20px;
  text-align: center;
  cursor: pointer;
}
</style>
  • DEMO

このように子要素クリック時に親要素のイベントも発生してしまうのをどうにかしたかった

解決策

子要素のイベントトリガー時に親要素のイベントを中止してあげればOK

  • sample.html
<div id="js-alert-2">
  <button id="js-child-2">子要素</button>
</div>

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script>
$(function() {
  $('#js-alert-2').click(function() {
    alert('親要素がクリックされたよ！')
  })
  $('#js-child-2').click(function(event) { // ⭐️ 引数にeventを追加
    event.stopPropagation() // ⭐️ 追加
    alert('子要素がクリックされたよ！')
  })
});
</script>

<style>
#js-alert-2 {
  background: #ccc;
  padding: 20px;
  text-align: center;
  cursor: pointer;
}
</style>

  • DEMO

\ 案件のご依頼・ご相談はこちらから /