【小ネタ】double click と single click で別のメソッドを発火させる

概要

onClick→single click
onDoubleClick→double click
としてoptionがあるのですが、両方を設定すると常にシングルクリックになってしまう課題の解消。

追記(2022/8/3)

コメント欄にさらにより良いコードが載っているので、活用される場合はそちらもご確認くださいmm

version

やりたいこと

• 一つの要素でダブルクリックとシングルクリック(普通の左クリック)で別の判定をしたい
  例えばECサイトなどで、
  シングルクリック→商品を選択状態に(水色の枠でカードを囲むなど)
  ダブルクリック→商品詳細ページに遷移
  といったことを実装したい時のお話。

• Reactで実装
  単にJavaScriptのお話なのですが、React触っているときに出たお話なので。
  調べるとクラス構文のものは見つけましたが、関数コンポーネントのものは見当たらなかったので。

実際のコード

export default function App() {
  const singleClick = () => {
    alert("single click");
    console.log("single click");
  };
  const doubleClick = () => {
    alert("double click");
    console.log("double click");
  };

  let clickCount = 0;
  const handleSingleOrDoubleClick = () => {
    clickCount++;
    if (clickCount < 2) {
      setTimeout(() => {
        if (1 < clickCount) {
          doubleClick();
        } else {
          singleClick();
        }
        clickCount = 0;
      }, 200);
    }
  };

  return (
    <div className="App">
      <div onClick={singleClick}>single</div>
      <div onDoubleClick={doubleClick}>double</div>
      <div onClick={singleClick} onDoubleClick={doubleClick}>
        NG
      </div>
      <div onClick={() => handleSingleOrDoubleClick()}>click here</div>
    </div>
  );
}

参考にさせて頂いた記事