JavaScriptイベントハンドリング：event.preventDefault() vs. return false
JavaScriptでイベントハンドリングを行う際、event.preventDefault()とreturn falseは、いずれもイベントのデフォルト動作をキャンセルするために使用されます。しかし、両者には微妙な違いがあります。
event.preventDefault()は、イベントのデフォルト動作をキャンセルするメソッドです。例えば、フォーム送信ボタンのクリックイベントでevent.preventDefault()を使用すると、フォーム送信をキャンセルできます。
const form = document.querySelector('form');
form.addEventListener('submit', (event) => {
event.preventDefault();
// フォーム送信をキャンセル後の処理
});
return falseは、イベントハンドリング関数の戻り値として使用できます。イベントハンドリング関数内でreturn falseを返すと、イベントのデフォルト動作とイベント伝播の両方をキャンセルできます。
const form = document.querySelector('form');
form.addEventListener('submit', () => {
// フォーム送信前の処理
return false; // フォーム送信とイベント伝播をキャンセル
});
違い
event.preventDefault()とreturn falseの主な違いは、イベント伝播のキャンセルにあります。
event.preventDefault(): イベントのデフォルト動作はキャンセルするが、イベント伝播はキャンセルしない。return false: イベントのデフォルト動作とイベント伝播の両方をキャンセルする。
使い分け
- イベントのデフォルト動作のみをキャンセルしたい場合は、
event.preventDefault()を使用します。 - イベントのデフォルト動作とイベント伝播の両方をキャンセルしたい場合は、
return falseを使用します。
フォーム送信のキャンセル
<form id="my-form">
<input type="text" name="name">
<input type="submit" value="送信">
</form>
JavaScript
const form = document.querySelector('#my-form');
form.addEventListener('submit', (event) => {
// フォーム送信前の処理
// フォーム送信をキャンセル
event.preventDefault();
// フォーム送信後の処理
});
このコードでは、フォーム送信ボタンのクリックイベントでevent.preventDefault()を使用しています。そのため、フォーム送信ボタンをクリックしても、フォームは送信されません。
アンカー要素のクリックイベントのキャンセル
HTML
<a href="https://www.google.com/">Google</a>
const anchor = document.querySelector('a');
anchor.addEventListener('click', (event) => {
// アンカー要素クリック前の処理
// ページ遷移をキャンセル
return false;
// アンカー要素クリック後の処理
});
このコードでは、アンカー要素のクリックイベントでreturn falseを使用しています。そのため、アンカー要素をクリックしても、ページ遷移は行われません。
上記以外にも、event.preventDefault()とreturn falseは様々な場面で使用できます。詳細は、上記の参考資料を参照してください。
イベントハンドリングのその他の方法
イベントリスナーを削除することで、イベントハンドリングを無効化できます。
const element = document.querySelector('#my-element');
const listener = (event) => {
// イベント処理
};
element.addEventListener('click', listener);
// イベントハンドリングを無効化
element.removeEventListener('click', listener);
イベントオブジェクトの属性を変更することで、イベントのデフォルト動作を変更できます。
const element = document.querySelector('#my-element');
element.addEventListener('click', (event) => {
// イベント処理
// イベントのデフォルト動作を変更
event.target.href = 'https://www.example.com/';
});
イベント伝播の停止
event.stopPropagation()を使用することで、イベント伝播を停止できます。
const element = document.querySelector('#my-element');
element.addEventListener('click', (event) => {
// イベント処理
// イベント伝播を停止
event.stopPropagation();
});
イベントのキャプチャ
addEventListener()の第三引数にtrueを渡すことで、イベントキャプチャを設定できます。イベントキャプチャを設定すると、イベント伝播の開始時にイベントハンドリング関数が呼び出されます。
const element = document.querySelector('#my-element');
element.addEventListener('click', (event) => {
// イベント処理
}, true);
これらの方法は、event.preventDefault()とreturn falseよりも柔軟なイベントハンドリングが可能です。状況に応じて適切な方法を選択してください。
javascript jquery event-handling
