JavaScript学習ログ ダブルクリックの禁止処理

ダブルクリック禁止の処理

業務でダブルクリックを禁止する処理が必要となり、自分なりに調べたうえで、練習として実装を行いました。

練習では要素の取得をタグ名で行っていますが、実際の案件では対象の要素が多くなりすぎるため、クラス名で取得するように変更する予定です。

また、今回の案件はスマートフォン端末がメインとなるため、挙動を安定させる目的でdblclickイベントではなく、1回目のクリックから1秒間は2回目のクリックを受け付けない処理を採用しました。

  <a href="https://example.com">アンカー</a>
  <form action="https://example.com">
    <button type="submit">ボタン</button>
  </form>

    .disabled {
      pointer-events: none;
    }

    document.addEventListener('DOMContentLoaded', function () {
      const btnAnchors = document.querySelectorAll('a');
      const btnButtons = document.querySelectorAll('button');

      let isClicked = false; // クリック未実行と定義

      // リンクのクリックイベント
      btnAnchors.forEach((btnAnchor) => {
        btnAnchor.addEventListener('click', function (event) {
          if (isClicked) {
            event.preventDefault(); // デフォルトの挙動を阻止→リンク無効化
            return; // これ以上処理を行わない
          }

          isClicked = true; // クリック時のデフォルトの挙動を行う
          btnAnchor.classList.add('disabled'); // 2回目のクリック禁止

          // 1秒後に再度クリックできるように
          setTimeout(() => {
            isClicked = false;
            btnButton.classList.remove('disabled'); // 無効化解除
          }, 1000);
        });
      });

      // ボタンのクリックイベント
      btnButtons.forEach((btnButton) => {
        btnButton.addEventListener('click', function (event) {
          if (isClicked) {
            event.preventDefault(); // デフォルトの挙動を阻止→リンク無効化
            return; // これ以上処理を行わない
          }

          isClicked = true; // クリック時のデフォルトの挙動を行う
          btnButton.disabled = true; // ボタンを無効化（disabled属性）

          // 1秒後に再度クリックできるように
          setTimeout(() => {
            isClicked = false;
            btnButton.disabled = false; // ボタンの無効化解除
          }, 1000);
        });
      });
    });

aタグの場合は.disabledクラスを付与し、buttonタグの場合はdisabled属性を設定することで、2回目のクリックを防止しています。

現在はその違いによって処理を分けていますが、共通部分を関数にまとめて引数で制御すれば、記述量を減らせるのではないかと考えました。

ただし今回は、まだそのような実装を行うだけの理解が十分ではないため、チャットGPTに相談しつつコードの簡略化を試みようと思っています。

❗最初に詰まった部分

• loadイベントを設定していなかったため、要素の取得に失敗していました。

• 実装練習時にボタンが複数存在していたため、意図した要素すべてに対して処理が適用されず、aタグやbuttonタグのクリック禁止処理が1つの要素にしか反映されていませんでした。背景の色を赤く変えることで確認していたのですが、1つしか反応しませんでした。

今回新しく出会ったメソッド

• Event: preventDefault() メソッド
  ブラウザがそのイベントに対して行う「デフォルトの動作」をキャンセルする。

• Window: setTimeout() メソッド
  指定した時間（ミリ秒）経ったあとに、1回だけ関数を実行する。