Tengo una función JS que funciona bien, cuando el usuario hace clic en un botón después de x segundos, el formulario se enviará si se mantiene presionado el botón del mouse; de lo contrario, si se suelta el mouse, el botón vuelve a su estado previo al clic. Sin embargo, descubrí un problema en el que si el cursor del mouse deja el botón, el formulario aún se activará y prácticamente romperá todo.
Necesito que mi función mouseup también se active si el mouse deja el botón o pierde el enfoque de alguna manera.
Muchas gracias de antemano.
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'); } });
}
Si extrae la lógica de las funciones mousedown
y mouseup
, será más fácil reutilizarla.
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); }
El evento que está buscando es el evento "mouseleave".
El evento en el siguiente script se activará cada vez que el mouse deje el botón.
document.getElementById("button").addEventListener("mouseleave", () => { alert("triggered event") })
<button id="button">Click Me</button>