javascript 如果鼠标光标离开按钮容器则触发脚本

Question

我有一个运行良好的 JS 函数，当用户在 x 秒后单击按钮时，如果按住鼠标按钮，表单将提交，否则，如果松开鼠标，按钮将返回到其预单击的状态状态。然而，我发现了一个问题，如果鼠标光标离开按钮，那么表单仍然会触发并且几乎会破坏所有内容。

如果鼠标离开按钮或以任何方式失去焦点，我需要让我的 mouseup 函数也触发。

非常感谢。

function conf_submit(btn) {
var btn_name = $(btn).val();
var btnID = $(btn).attr('id');
var process = false;

$(btn).mousedown(function() {
    btn_timeout = setTimeout(function() {
        process = true;
        $(btn).val('Processing..');
        $(btn).attr('class', 'button btn_longpress small btn-processing');
        $('#' + btnID + '_form').submit();
    }, 2000);
    if(process == false){
        $(this).val('Release to cancel!');
        $(this).attr('class', 'button btn_longpress small cancel cancel-animate jiggle');
    }
});

$(btn).mouseup(function() {
    clearTimeout(btn_timeout);
    if(process == false){
        $(this).val( btn_name );
        $(this).attr('class', 'button btn_longpress small');
    }
});

}

Answer 1

您要查找的事件是“mouseleave”事件。

下面脚本中的事件将在您的鼠标每次离开按钮时触发。

document.getElementById("button").addEventListener("mouseleave", () => {
  alert("triggered event")
})

<button id="button">Click Me</button>

Answer 2

如果您从 mousedown 和 mouseup 函数中提取逻辑，将很容易重新利用它。

function conf_submit(btn) {
    var btn_name = $(btn).val();
    var btnID = $(btn).attr('id');
    var process = false;

    var start = function () {
        btn_timeout = setTimeout(function () {
            process = true;
            $(btn).val('Processing..');
            $(btn).attr('class', 'button btn_longpress small btn-processing');
            $('#' + btnID + '_form').submit();
        }, 2000);
        if (process == false) {
            $(this).val('Release to cancel!');
            $(this).attr('class', 'button btn_longpress small cancel cancel-animate jiggle');
        }
    };
    var stop = function () {
        clearTimeout(btn_timeout);
        if (process == false) {
            $(this).val(btn_name);
            $(this).attr('class', 'button btn_longpress small');
        }
    };

    $(btn).mousedown(start);
    $(btn).mouseup(stop);
    $(btn).mouseleave(stop);
}

javascript 如果鼠标光标离开按钮容器则触发脚本

javascript trigger script if mouse cursor leaves button container

javascript

mouseup

mousedown