JavaScript
React

[速攻理解] preventDefault() とstopPropagation()の違い

preventDefault()

画面の遷移を行わないように制御する

stopPropagation()

イベント伝播を行わないようにする

実験

preventDefault()のみ

test.html
<div class="parent_button">
  <p><a href="#" class="child_button">click</a></p>
</div>
test.js
$('.child_button').on('click', function(e) {
  e.preventDefault();
  alert("child_button");
}

$('.parent_button').on('click', function(e) {
  alert("parent_button");
}

画面遷移が行われない

stopPropagation()のみ

test.html
<div class="parent_button">
  <p><a href="#" class="child_button">click</a></p>
</div>
test.js
$('.child_button').on('click', function(e) {
  e.stopPropagation();
  alert("child_button");
}

$('.parent_button').on('click', function(e) {
  alert("parent_button");
}

"parent_button"が表示されない(そのイベントが着火されない)

preventDefault() と stopPropagation()

test.html
<div class="parent_button">
  <p><a href="#" class="child_button">click</a></p>
</div>
test.js
$('.child_button').on('click', function(e) {
  e.preventDefault();
  e.stopPropagation();
  alert("child_button");
}

$('.parent_button').on('click', function(e) {
  alert("parent_button");
}

画面遷移が行われない + "parent_button"が表示されない(そのイベントが着火されない)