こんにちは、ユキです。
新卒で大企業のSIerに入社し、現在は大手の業務システムWebアプリケーションを開発しています。
イベント処理を中断させたいな、、
return文を使いこなすことでできるようになるよ！
JavaScriptでイベント処理を中断させるにはreturn文を使いこなすことでできるようにります。
今回は、return falseについて解説していきます。
スポンサーリンク
１： return文とは
return文とは、関数（メソッド）内で処理した結果を戻り値として呼び出し元に返すことができる処理です。
メソッド内の結果を返すことができるので、この結果を用いて別の処理に利用することができます。
例えば、別の関数への引数にしたり、if文やfor文の条件式に使用して処理を応用することも可能です。
下記に実用例のコードを追記します。
function name(judge) { if (judge) { return 'A君'; } else { return 'B君'; }
}
console.log( name(true) ); 実行結果はこのようになります。
A君正直、return文を使用していないシステムはないといっても過言ではないので使いこなしていきましょう。
２： JavaScriptのイベント処理について
JavaScriptを使用し、画面遷移やボタン操作などを行うことをイベント処理（イベントハンドラ）といいます。
リンクをクリックして画面遷移をするときも、ボタンを押して画面を更新する時もイベントハンドラが行われています。
イベントハンドラで代表的なものには、onclickやonchangeなどがあります。これらは要素がクリックされたり、要素が変更された場合に処理されます。うまく使用することでいくつものパターンのシステム構築をすることができます。
JavaScriptでは、「on」キーワードの隣にイベント名をくっつけたものがイベントハンドラに使われるものだと覚えてください。
代表的なものを表にするので覚えておきましょう。
| イベントハンドラ名 | 説明 |
|---|---|
| onclick | 要素がクリックされたときに実行 |
| onchange | 要素の内容が変更されたときに実行 |
| onselect | テキストなどを選択したときに実行 |
| onload | ページが読みこまれたときに実行 |
| onmouseover | 要素にマウスカーソルが重なったときに実行 |
３： return falseでできること
return falseでできることは、イベント処理の中断です。
例えば、onclickで要素をクリックしたときに行われる処理をある理由で中断させたい場合に有効活用できます。
主にif文での条件分岐で使用されることが多く、このreturn falseのおかげでユーザーが不正な操作をした場合画面遷移できなくすることもできます。
実行例は下記のような感じです。
(HTML側)
<a href="(リンク先のURL)" onclick="judge(10)">リンク先</a>(JavaScript側)
function judge(number) { if (number >= 10) { return false; }
}この場合は、引数に割り当てられたのは10なのでif文の中身が実行されfalseを返します。
この操作により、リンク先への遷移は行われずに画面が切り替わることはありません。
まとめ
今回は、return falseの使い方について解説しました。
return falseを使用するとイベント処理を中断させることができるため、条件分岐などを使い必要な場合に実行できるようになりましょう。
スポンサーリンク
