javascriptmousedownmouseup

javascript trigger script if mouse cursor leaves button container


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

}


Solution

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