JavaScriptのクリックイベントリスナーにreturn falseを追加する効果

2024-04-06

JavaScriptのクリックイベントリスナーにreturn falseを追加する効果

HTMLの要素にクリックイベントリスナーを設定する際、イベントハンドラ関数の最後にreturn falseを追加することがあります。これは、いくつかの異なる効果をもたらします。

効果

リンクの遷移を抑制する

<a>要素のクリックイベントリスナーにreturn falseを追加すると、そのリンクをクリックしてもページ遷移が抑制されます。これは、ページ遷移前に確認メッセージを表示したり、別の処理を実行したりする場合に役立ちます。

例

<a href="https://example.com/">リンク</a>

const link = document.querySelector('a');

link.addEventListener('click', () => {
  // 確認メッセージを表示
  if (!confirm('リンクを開きますか？')) {
    return false;
  }
});

フォーム送信を抑制する

<form>要素のsubmitイベントリスナーにreturn falseを追加すると、フォーム送信が抑制されます。これは、フォームデータの入力チェックや、別の処理を実行してから送信する場合に役立ちます。

<form action="https://example.com/">
  <input type="text" name="name">
  <input type="submit" value="送信">
</form>

const form = document.querySelector('form');

form.addEventListener('submit', () => {
  // 入力チェック
  const name = form.querySelector('input[name="name"]').value;
  if (name === '') {
    alert('名前を入力してください');
    return false;
  }
});

スクロールの抑制

デフォルトでは、ページ内のリンクをクリックすると、そのリンク先までスクロールされます。クリックイベントリスナーにreturn falseを追加すると、このスクロールを抑制できます。

<a href="#section-1">セクション1へ</a>

<div id="section-1">
  <h1>セクション1</h1>
</div>

const link = document.querySelector('a');

link.addEventListener('click', () => {
  // スクロールを抑制
  return false;
});

注意点

return falseは、イベントの伝達を止める効果もあります。つまり、親要素に設定されたイベントリスナーは呼び出されません。
return falseは、イベントのデフォルト動作をキャンセルする効果もあります。例えば、<a>要素のクリックイベントリスナーにreturn falseを追加すると、ブラウザの戻る/進むボタンでそのリンク先に戻ることはできません。

リンクの遷移を抑制する

<a href="https://example.com/">リンク</a>

const link = document.querySelector('a');

link.addEventListener('click', () => {
  // 確認メッセージを表示
  if (!confirm('リンクを開きますか？')) {
    return false;
  }

  // 別の処理を実行
  // ...

  // リンクを開く
  window.location.href = link.href;
});

フォーム送信を抑制する

<form action="https://example.com/">
  <input type="text" name="name">
  <input type="submit" value="送信">
</form>

const form = document.querySelector('form');

form.addEventListener('submit', () => {
  // 入力チェック
  const name = form.querySelector('input[name="name"]').value;
  if (name === '') {
    alert('名前を入力してください');
    return false;
  }

  // 別の処理を実行
  // ...

  // フォームを送信
  form.submit();
});

スクロールを抑制

<a href="#section-1">セクション1へ</a>

<div id="section-1">
  <h1>セクション1</h1>
</div>

const link = document.querySelector('a');

link.addEventListener('click', () => {
  // スクロールを抑制
  return false;

  // 別の処理を実行
  // ...

  // スクロールを実行
  window.scrollTo(0, section1.offsetTop);
});

これらのサンプルコードは、return falseを使用してクリックイベントのデフォルト動作をキャンセルする方法を示しています。必要に応じて、コードを修正して、さまざまな処理を実行することができます。

クリックイベントのデフォルト動作をキャンセルする他の方法

preventDefault() メソッドを使用する

Event オブジェクトには、preventDefault() メソッドがあります。このメソッドを呼び出すと、イベントのデフォルト動作をキャンセルできます。

<a href="https://example.com/">リンク</a>

const link = document.querySelector('a');

link.addEventListener('click', (event) => {
  // 確認メッセージを表示
  if (!confirm('リンクを開きますか？')) {
    event.preventDefault();
  }
});

stopPropagation() メソッドを使用する

<a href="https://example.com/">
  <span>リンク</span>
</a>

const link = document.querySelector('a');

link.addEventListener('click', (event) => {
  // 確認メッセージを表示
  if (!confirm('リンクを開きますか？')) {
    event.stopPropagation();
  }
});

link.querySelector('span').addEventListener('click', () => {
  // 別の処理を実行
  // ...
});

event.target を使用して処理を分岐させる

event.target プロパティを使用して、クリックされた要素を取得できます。この要素を使用して、処理を分岐させることができます。

<a href="https://example.com/">
  <span>リンク</span>
</a>

const link = document.querySelector('a');

link.addEventListener('click', (event) => {
  // クリックされた要素を取得
  const target = event.target;

  // 要素に応じて処理を分岐
  if (target === link) {
    // リンクを開く
    window.location.href = link.href;
  } else if (target === link.querySelector('span')) {
    // 別の処理を実行
    // ...
  }
});