HTMLのreturnValueイベントプロパティとは？使い方とサンプルコードを解説

HTMLのreturnValueイベントプロパティは、現在のイベントがキャンセルされたかどうかを取得（参照）および設定（変更）するためのプロパティです。イベントハンドラ内でこのプロパティを確認することで、イベントのデフォルト動作がキャンセルされるかどうかを判断できます。

構文

returnValueイベントプロパティの構文は以下の通りです。

1. returnValueの値を取得する

event.returnValue

2. returnValueに値を設定する

event.returnValue = "true | false"

「true」を設定するとイベントはキャンセルされずに通常どおり実行され、「false」を設定するとイベントがキャンセルされます。

それでは、HTML returnValueイベントプロパティの具体的な使用例を見てみましょう。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        color: #000;
        height: 100vh;
        background-color: #FBAB7E;
        background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
        text-align: center;
    }
    input {
        width: 200px;
        height: 2rem;
    }
    .msg {
        font-size: 1.5rem;
    }
</style>
</head>
<body>
<h1>HTML returnValue Event Property Demo</h1>
<input type="text" placeholder="Enter your name" onfocus="show(event)">
<p class="msg"></p>
<script>
    function show(event) {
        document.querySelector('.msg').innerHTML = 'Is onfocus event is active on above input field? ' + event.returnValue;
    }
</script>
</body>
</html>

出力結果

上記の入力フィールドに値を入力してフォーカスを当てると、returnValueイベントプロパティの値が画面に表示されます。

補足：returnValueプロパティを使用する際の注意点

returnValueプロパティは、もともとInternet Explorerで導入されたプロパティですが、その後主要なブラウザでも広くサポートされるようになりました。ただし、現在の標準仕様では、イベントのキャンセルにはpreventDefault()メソッド、キャンセル状態の確認にはdefaultPreventedプロパティを使用することが推奨されています。新しいプロジェクトでは、これらの標準的な代替手段の利用を検討するとよいでしょう。