javascript trigger script if mouse cursor leaves button container-CodePudding

I have a JS function which works fine, when the user clicks a button after x seconds the form will submit if the mouse button is held down, otherwise if the mouse is released the button goes back to its pre-clicked state. I have however discovered a problem where if the mouse cursor leaves the button then the form will still trigger and pretty much break everything.

I need to have my mouseup function also trigger if the mouse leaves the button or losses focus in any way.

Many thanks in advance.

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');
    }
});

}

CodePudding user response：

If you extract the logic out of the mousedown and mouseup functions, it will make it easy to repurpose it.

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);
}

CodePudding user response：

The event you are looking for is the "mouseleave" event.

The event in the script below will trigger everytime your mouse leaves the button.

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

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