[jQuery]preventDefault()とstopPropagation()とreturn falseの違いについて

タイトルにjQueryと書いてありますが、JavaScriptが本来持っている機能になります。

クリックなどのイベントが発生すると、イベントを取得できるようになります。
このイベントに割り当てられた機能を使うとリンクの遷移を無効化したりする事ができるのですが、じゃあ「return false」とどう違うの？という疑問をまとめてみました！

一体何ができてどうなるの？？

例としてリンクをクリックしたけど、JavaScriptのある処理だけして画面遷移はさせたくない場合って一般的には「return false」で処理していますよね。

<a href="/" id="test">クリック無効です。</a>

<script type="text/javascript">
$(function () {
    $(document).on('click', '#test', function (e) {
        alert('クリックされました。');
        return false;
    });
});
</script>

こんな感じです。

これだけであれば別にいいんですけど、処理する内容が多くreturn falseを書き忘れてしまう場合や、このメソッドは画面遷移はしないよ！と一発でわかるようにしたい場合があると思います。

そういう時に使えるのが「preventDefault()」です。

「stopPropagation()」は、上の要素のイベントをキャンセルするという性質をもっています。サンプルは下記で上げますので順を追ってやってみましょう。

preventDefault()を使ってみる

<a href="/" id="test">クリック無効です。</a>

<script type="text/javascript">
$(function () {
    $(document).on('click', '#test', function (e) {
        e.preventDefault();
        alert('クリックされました。');
    });
});
</script>

これの良いところは、return falseと違ってプログラムの最初に記述することができる事です。

書いておくだけで、このメソッド内は「return false」と同じ効果を発揮している状態となります。

普通であれば、「return false」を記述しないとリンク先に行ってしまいますが、e.preventDefault();を書くことによってaタグのリンク機能は無効となります。

<a href="/" id="test2">確認画面がでます。</a>

<script type="text/javascript">
$(function () {
    $(document).on('click', '#test2', function (e) {
        e.preventDefault();

        if (confirm('確認画面ですよー')) {
            alert('OK');
        } else {
            alert('NG');
        }
    });
});
</script>

ifでもわざわざreturn falseを書かなくていいので、コードがすっきりします。

stopPropagation()を使ってみる

次に「stopPropagation()」ですが、これは上の階層イベントをキャンセルすることができます。

<div id="div-box" style="width: 300px; height: 300px; border: solid 1px;">
    <a href="/" id="test">実行</a>
</div>

<script type="text/javascript">
$(function () {
    $(document).on('click', '#div-box', function (e) {
        alert('DIVです。');
    });
    
    $(document).on('click', '#test', function (e) {
        alert('リンクです。');
    });
});
</script>

上のコードの「実行」をクリックすると「リンクです。」と「DIVです。」のアラートが表示されます。

divタグとaタグそれぞれにクリックイベントが設定してありますが、子要素をクリックすると親要素のクリックイベントも実行されてしまいます。

aタグをクリックした場合は、親要素のクリックイベントを無効化したいとある場合に「stopPropagation()」が役に立ちます。

<div id="div-box" style="width: 300px; height: 300px; border: solid 1px;">
    <a href="/" id="test">実行</a>
</div>

<script type="text/javascript">
$(function () {
    $(document).on('click', '#div-box', function (e) {
        alert('DIVです。');
    });
    
    $(document).on('click', '#test', function (e) {
        e.stopPropagation();
        alert('リンクです。');
    });
});
</script>

追加するだけで、「DIVです。」が表示されなくなりました。

親要素のイベントは無視されるので、変な挙動に悩まされていた人はこれで解決しましたね！

親要素は無視されるけど、リンクが無効化されてない！！！

と、思う人もいると思いますけど安心してください！！解決できますよ！！

<div id="div-box" style="width: 300px; height: 300px; border: solid 1px;">
    <a href="/" id="test">実行</a>
</div>

<script type="text/javascript">
$(function () {
    $(document).on('click', '#div-box', function (e) {
        alert('DIVです。');
    });
    
    $(document).on('click', '#test', function (e) {
        e.preventDefault();
        e.stopPropagation();
        alert('リンクです。');
    });
});
</script>

もうおわかりですね？最初に書いた「preventDefault()」を書いてあげるだけで大丈夫です。

似ているので、片方だけ書けば大丈夫かな？と感じてしまいますが役割が違いますので必要であれば両方とも書いてあげる必要があります。

さいごに

今までreturn falseを書いていた人には、目からウロコの話ではないでしょうか？
私もこの記述方法を知った時は震えが止まりませんでした。

jQueryが出てからはJavaScriptへの扱いやすさが簡単になり、ブラウザの差もほぼ吸収してくれるのでやりたい事ができるようになってきました。

ただ、開発者としては悩みが増えたりもしてます・・・(´・ω・`)