Nanfeng

Notes on software development, code, and curious ideas

Cocos Creator Double-Click Detection with TOUCH_END Timing

In
Listen for TOUCH_END on a Cocos Creator node, measure the interval between two events, and trigger double-click behavior with a configurable threshold.

The following component detects a double click by measuring the interval between two TOUCH_END events:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
const { ccclass } = cc._decorator;

@ccclass
export default class DoubleClickHandler extends cc.Component {
    private lastClickTime = 0;
    private readonly doubleClickInterval = 300;

    onLoad() {
        this.node.on(cc.Node.EventType.TOUCH_END, this.onTouchEnd, this);
    }

    onDestroy() {
        this.node.off(cc.Node.EventType.TOUCH_END, this.onTouchEnd, this);
    }

    onTouchEnd(event: cc.Event.EventTouch) {
        const currentTime = Date.now();

        if (currentTime - this.lastClickTime <= this.doubleClickInterval) {
            console.log('Double click!');
            // Run the double-click action here.
        }

        this.lastClickTime = currentTime;
    }
}

doubleClickInterval is the maximum time, in milliseconds, allowed between the two clicks. Adjust it to suit the interaction. Removing the listener in onDestroy prevents a stale callback from remaining after the component is destroyed.

+