Posted at

[速攻理解] 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"が表示されない(そのイベントが着火されない)