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

### 追記(2022/8/3)

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

## version
![Screen Shot 2022-03-21 at 16.32.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534071/1068c59d-b952-aab6-95f1-06bc4a6a00ae.png)

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

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

## 実際のコード

![img](/mosaic-code.jpg)

https://codesandbox.io/s/singleordoubleclick-lv03qj?file=/src/App.js:0-826

## 参考にさせて頂いた記事

https://naughtldy.hatenablog.jp/entry/2018/02/27/160000
[cv:issue_marketplace_engineer]

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

### 追記(2022/8/3)

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

## version
![Screen Shot 2022-03-21 at 16.32.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534071/1068c59d-b952-aab6-95f1-06bc4a6a00ae.png)

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

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

## 実際のコード

```ts
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>
  );
}

```

https://codesandbox.io/s/singleordoubleclick-lv03qj?file=/src/App.js:0-826

## 参考にさせて頂いた記事

https://naughtldy.hatenablog.jp/entry/2018/02/27/160000


概要

追記(2022/8/3)

version

続きを読むには単価診断を受けてください（30秒）