React+TypeScript: triple click, quadruple click

はじめに

クリック数を数えるロジックはdivにしか使えませんが、このロジックならダブルクリック以上のトリプルクリック、クアドルプルクリックとかも拾えるのではないかとやってみました。

遊んでみて下さい。

実行例

See the Pen double-triple-quadruple-click by kalz2q (@kalz2q) on CodePen.

説明

setTimeoutで指定した時間以内にclickcountをいくつまで上げたかで分岐しています。

setTimeoutは500を指定したので、0.5秒以内だと思う。

使い道としては3次元、4次元のテーブルの要素選択に使えるのではないかと思います。

クリック数を数えるロジックはdivにしか使えない、と言うのは、checkboxはclickを受け付けないし、buttonはonClick, onDoubleClickしかないからなのですが、今検索したらonClickはevent.detailでclick数を取得出来るみたい。やってみよう。=> やってみたところ、event.detailでクリック数は取れるのだが、1,2,3,4,... と全て取れてしまってsetTimeoutで制御も出来なかった。