Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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);
}
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading