概要

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

追記(2022/8/3)

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

version

やりたいこと

• 一つの要素でダブルクリックとシングルクリック(普通の左クリック)で別の判定をしたい

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

• Reactで実装

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

実際のコード

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]