【JavaScript】指定回数クリックで処理を実行する方法｜累積カウント・一定時間内の連打・ダブル/トリプルクリックまで

<button id="secret-btn" type="button">クリックしてみて</button>
<p id="message"></p>

const button = document.getElementById("secret-btn");
const message = document.getElementById("message");

let clickCount = 0;
const threshold = 5; // 5回で発火

button.addEventListener("click", () => {
  clickCount++;

  if (clickCount >= threshold) {
    message.textContent = "隠し機能が起動しました！";
    clickCount = 0; // また数え直す場合はリセット（不要なら削除）
  }
});

let clickCount = 0;
let hasTriggered = false;

button.addEventListener("click", () => {
  if (hasTriggered) return; // 起動済みなら何もしない

  clickCount++;
  if (clickCount >= threshold) {
    message.textContent = "一度だけの隠し処理が実行されました。";
    hasTriggered = true;
  }
});

let clickCount = 0;
let resetTimer = null;
const threshold = 5;
const within = 2000; // 2秒以内

button.addEventListener("click", () => {
  clickCount++;

  // クリックのたびにリセット用タイマーを貼り直す
  clearTimeout(resetTimer);
  resetTimer = setTimeout(() => { clickCount = 0; }, within);

  if (clickCount >= threshold) {
    message.textContent = "連打を検知しました！";
    clickCount = 0;
    clearTimeout(resetTimer);
  }
});

button.addEventListener("click", (e) => {
  // e.detail = 連続クリック回数（2=ダブル, 3=トリプル）
  if (e.detail === 3) {
    message.textContent = "トリプルクリックを検出しました";
  }
});

<button id="reveal-btn" type="button">？？？</button>
<a href="/secret/" id="secret-link" hidden>秘密のページへ</a>

const revealBtn = document.getElementById("reveal-btn");
const secretLink = document.getElementById("secret-link");

let clickCount = 0;
const threshold = 5;

revealBtn.addEventListener("click", () => {
  clickCount++;
  if (clickCount >= threshold) {
    secretLink.hidden = false; // 隠しリンクを表示
  }
});

class ClickTrigger {
  constructor(target, options = {}) {
    this.el = typeof target === "string"
      ? document.querySelector(target)
      : target;
    this.count     = options.count ?? 5;       // 発火に必要な回数
    this.within    = options.within ?? 0;      // 0 なら累積、>0 なら時間内(ms)
    this.once      = options.once ?? false;    // 一度だけ発火するか
    this.onTrigger = options.onTrigger;        // 発火時のコールバック
    this.clicks = 0;
    this.timer = null;
    this.done = false;
    this._handle = this._handle.bind(this);
    if (this.el) this.el.addEventListener("click", this._handle);
  }

  _handle(e) {
    if (this.done) return;
    this.clicks++;

    // 時間内モードなら、一定時間途切れたらカウントを戻す
    if (this.within > 0) {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => { this.clicks = 0; }, this.within);
    }

    if (this.clicks >= this.count) {
      this.clicks = 0;
      clearTimeout(this.timer);
      if (this.once) {
        this.done = true;
        this.el.removeEventListener("click", this._handle);
      }
      this.onTrigger?.(e); // 発火
    }
  }
}

// 使い方：ロゴを2秒以内に5回クリックで隠しモード（一度だけ）
new ClickTrigger("#logo", {
  count: 5,
  within: 2000,
  once: true,
  onTrigger: () => console.log("隠しモード起動！"),
});