jQuery绑定多事件时如何仅触发首个事件而非全部？

针对你遇到的绑定多事件后单次操作重复触发逻辑的问题，可以通过状态锁机制实现仅执行单次操作中首个触发的事件，具体方案如下：

核心思路 #

用一个状态变量标记当前是否正在处理单次操作的事件，首次触发事件时执行逻辑并上锁，待当前事件循环结束后解锁，确保同一操作触发的后续事件被直接跳过。

修改后的代码 #

let i = 0;
// 状态锁：标记是否正在处理单次操作的事件
let isProcessing = false;

$("#inputTest").on("focus click touchstart", function(e) {
    // 如果已处于处理状态，直接跳过当前事件
    if (isProcessing) return;

    // 上锁，阻止后续事件执行
    isProcessing = true;

    // 执行你的业务逻辑
    ++i;
    $(this).val(i);
    console.log(e.type);

    // 当前事件循环结束后解锁，允许下一次操作触发事件
    setTimeout(() => {
        isProcessing = false;
    }, 0);
});

方案说明 #

1. 状态锁的作用：isProcessing变量会在首个事件触发时立即设为true，同一操作触发的后续事件（比如点击输入框时的focus和click）会因为锁已开启而直接返回，不会执行逻辑。
2. 解锁时机：setTimeout(() => {}, 0)会把解锁逻辑放到下一个事件循环执行，确保当前操作的所有触发事件都处理完毕后，才允许响应下一次用户操作。
3. 适配自定义事件：不管是原生事件还是_click.Name、run.Name这类自定义事件，只要属于同一操作触发的批量事件，该方案都能有效过滤，仅保留首个触发的事件执行逻辑。

内容的提问来源于stack exchange，提问作者user19014207