1分でわかるreturn false; preventDefault(); stopPropagation() の違い

クリックイベントのサンプル

.innerを子、.outerを親にしてそれぞれにクリックイベントのサンプルを作成した。リンクをクリックするとalertの".inner", ".outer"が表示されてからiwb.jpに遷移する。

$(".inner").click(function(){
    alert(".inner");
});

$(".outer").click(function(){
    alert(".outer");
});

alertの".inner", ".outer"が表示されてからiwb.jpに遷移するサンプル

preventDefault()

preventDefault()を使用するとリンクの遷移などのイベントを無効にできる。

$(".inner").click(function(e){
    e.preventDefault();
    alert(".inner");
});

$(".outer").click(function(){
    alert(".outer");
});

preventDefault()のサンプル

stopPropagation()

stopPropagation()を使用するとイベント伝播をキャンセルできる。alertの".inner"は表示されるが".outer"は表示されない。リンク遷移は有効。

$(".inner").click(function(e){
    e.stopPropagation();
    alert(".inner");
});

$(".outer").click(function(){
    alert(".outer");
});

stopPropagation()のサンプル

preventDefault()+stopPropagation()

preventDefault()とstopPropagation()は併用可能。この場合alertで".inner"は表示されるが".outer"は表示されずリンクの遷移も発生しない。

$(".inner").click(function(e){
    e.preventDefault();
    e.stopPropagation();
    alert(".inner");
});

$(".outer").click(function(){
    alert(".outer");
});

preventDefault()+stopPropagation()のサンプル

return false

return falseはそれが記述された箇所を読み込んだ時点で以降の処理がすべてなくなる。イベント伝播（バブリング）も発生しない。よって.innerをクリックした場合は".inner"と".outer"の両方が表示されずリンクの遷移も発生しない。

$(".inner").click(function(){
    return false;
    alert(".inner");
});

$(".outer").click(function(){
    alert(".outer");
});

return falseのサンプル