如何检测多次鼠标点击？

Question

这里完全是菜鸟。我正在尝试模拟一个旧的 phone 键盘，当有像 ABC、DEF、...、PQRS 等这样分组的物理按钮时，您可以为第一个字母单击一次按钮，为第一个字母单击两次按钮第二个等等。我知道存在 mousePressed() 和 doubleCliked() 函数，但是有没有办法检测三次和四次点击？

Answer 1

完成您所描述的事情的最佳方法是让变量存储最后按下的按钮、连续按下的次数以及按下的时间。然后，如果在特定的 window 时间内再次按下同一个按钮，您可以确定是否增加计数。

let twoBtn;
let threeBtn;
let strTxt;

let lastPressed;
let lastPressTime;
let lastPressCount;

let letters = [[], [], ['A', 'B', 'C', '2'], ['D', 'E', 'F', '3']];

let value = '';
let next = '';

function setup() {
    noCanvas();
    
    twoBtn = createButton('2 (ABC)');
    twoBtn.mouseClicked(() => {
        let now = new Date().getTime();
        if (lastPressed === 2 && (now - lastPressTime) < 2000) {
            lastPressedCount++;
            next = letters[2][lastPressedCount - 1];
        } else {
            value += next;
            next = 'A';
            lastPressed = 2;
            lastPressedCount = 1;
        }
        lastPressTime = now;
        strTxt.value(value + next);
    });
    
    threeBtn = createButton('3 (DEF)');
    threeBtn.mouseClicked(() => {
        let now = new Date().getTime();
        if (lastPressed === 3 && (now - lastPressTime) < 2000) {
            lastPressedCount++;
            next = letters[3][lastPressedCount - 1];
        } else {
            value += next;
            next = 'D';
            lastPressed = 3;
            lastPressedCount = 1;
        }
        lastPressTime = now;
        strTxt.value(value + next);
    });
    
    strTxt = createInput();
    strTxt.attribute('readonly', 'readonly');
}

function draw() {
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.js"></script>

如何检测多次鼠标点击？

How can I detect multiple mouse clicks?

p5.js