JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptにおけるpreventDefault()とreturn falseの違いを徹底解説

preventDefault()とreturn falseの基本的な違い

preventDefault()は、イベントが発生した際にブラウザのデフォルト動作をキャンセルするメソッドです。例えば、リンクをクリックしたときのページ遷移を防ぎたい場合などに使用します。ただし、イベント自体の伝播（バブリング）は止められず、後続の処理も通常どおり実行されます。

一方、return falseは、インラインのイベントハンドラやjQueryなどの環境で使われた場合、デフォルト動作を停止するだけでなく、イベントの伝播も阻止します。また、関数内でreturn falseに到達した時点でそれ以降の処理は実行されず、即座に関数が終了するという特徴もあります。

つまり両者の違いは以下のようにまとめられます。

  • preventDefault(): デフォルト動作のみをキャンセルする
  • return false: デフォルト動作のキャンセルに加え、イベント伝播の停止や以降の処理の中断も行う（使い方によって挙動が異なるため注意が必要）

次に、preventDefault()とreturn falseの実際の動作を確認できるサンプルコードを紹介します。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>preventDefault() Vs return false</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-weight: 500;
        font-size: 18px;
        color: blueviolet;
    }
</style>
</head>
<body>
<h1>preventDefault() Vs return false</h1>
<a href="https://www.google.com" class="link">Google</a>
<input type="checkbox" class="check" onclick="return checkedOrNot(false)"/><br />
<div class="result"></div>
<br />
<div class="result"></div>
<h3>上のリンクまたはチェックボックスをクリックすると、preventDefault()とreturn falseの動作を確認できます</h3>
<script>
    let resEle = document.querySelectorAll(".result");
    let linkEle = document.querySelector(".link");
    let checkEle = document.querySelector(".check");
    function printText(event) {
        resEle[0].innerHTML = "preventDefault()によってリンクのデフォルト動作が停止されました";
        event.preventDefault();
    }
    function checkedOrNot(val) {
        if (val === true) {
            checkEle.checked = true;
        } else {
            resEle[1].innerHTML =
            "return falseによってチェックボックスがチェックされなくなりました";
            return false;
        }
    }
    linkEle.addEventListener("click", printText);
</script>
</body>
</html>

実行結果

JavaScriptにおけるpreventDefault()とreturn falseの違いを徹底解説

「Google」リンクをクリックした場合 − preventDefault()によりページ遷移がキャンセルされ、メッセージが表示されます。

JavaScriptにおけるpreventDefault()とreturn falseの違いを徹底解説

チェックボックスをクリックした場合 − return falseによりチェック操作が無効化されます。

JavaScriptにおけるpreventDefault()とreturn falseの違いを徹底解説

まとめ

デフォルト動作だけを防ぎたい場合はpreventDefault()を使うのが適切です。一方、return falseはイベント伝播まで止めるため、意図しない挙動を招くことがあります。ネイティブJavaScriptのaddEventListener内では、return falseはデフォルト動作をキャンセルしないため、用途に応じてevent.preventDefault()やevent.stopPropagation()を明示的に使い分けることが重要です。

  1. JavaScript関数からオブジェクトを返す方法をわかりやすく解説

    JavaScriptの関数からオブジェクトを返すには、return文を使用します。オブジェクト内のプロパティやメソッドにアクセスする際は、thisキーワードを活用すると便利です。この記事では、実際のコード例を使いながら、JavaScript関数からオブジェクトを返す基本的な方法を解説します。基本的な考え方JavaScriptでは、オブジェクトの中にメソッド（関数）を定義できます。そのメソッド内でreturn文を使えば、処理結果や値を呼び出し元に返すことができます。また、thisキーワードを参照することで、同じオブジェクト内の他のプロパティにアクセス可能です。サンプルコード以下のコードでは、従業

  2. JavaScriptでfalsy値（偽と評価される値）を見分ける方法

    JavaScriptにおけるfalsy値とはJavaScriptでは、値をBoolean型として評価したときに「false」とみなされる値がいくつか存在します。これらは「falsy値（偽の値）」と呼ばれます。条件分岐や論理演算において、意図しない動作を防ぐために、どの値がfalseと評価されるかを正しく理解しておくことが重要です。JavaScriptでfalseと評価される主な値は以下の通りです。false — Boolean型のfalseそのもの0 — 数値のゼロ空文字列：、、または ``（テンプレートリテラル）null — 値が存在しないことを示す特殊な値undefined — 値が未定義