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');
}
});
}
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);
}
The event you are looking for is the "mouseleave" event.
The event in the script below will trigger everytime your mouse leaves the button.
document.getElementById("button").addEventListener("mouseleave", () => {
alert("triggered event")
})<button id="button">Click Me</button>