JS长按按钮提交表单异常：鼠标移出按钮仍触发提交如何修复

核心调整点如下：

• 新增mouseleave事件监听：鼠标移出按钮区域时自动触发重置逻辑，清空倒计时
• 新增blur事件监听：按钮因任意场景失去焦点（比如切换窗口、按Tab切走焦点）时自动触发重置
• 修正btn_timeout变量的作用域声明，避免成为全局变量导致多按钮实例冲突
• 抽离公共重置逻辑，避免重复代码，同时新增重复点击的异常兼容

function conf_submit(btn) {
    const $btn = $(btn);
    const btn_name = $btn.val();
    const btnID = $btn.attr('id');
    let process = false;
    let btn_timeout = null;

    // 公共重置逻辑，三个事件共用
    function resetBtn() {
        if (btn_timeout) {
            clearTimeout(btn_timeout);
            btn_timeout = null;
        }
        if (!process) {
            $btn.val(btn_name);
            $btn.attr('class', 'button btn_longpress small');
        }
    }

    $btn.mousedown(function() {
        // 先清之前的倒计时，避免快速多次点击触发异常
        resetBtn();
        btn_timeout = setTimeout(function() {
            process = true;
            $btn.val('Processing..');
            $btn.attr('class', 'button btn_longpress small btn-processing');
            $('#' + btnID + '_form').submit();
        }, 2000);
        if (!process) {
            $btn.val('Release to cancel!');
            $btn.attr('class', 'button btn_longpress small cancel cancel-animate jiggle');
        }
    });

    // 鼠标松开、鼠标移出、失焦三个场景都触发重置
    $btn.on('mouseup mouseleave blur', resetBtn);
}

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