• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

139
Views
secuencia de comandos de activación de javascript si el cursor del mouse deja el contenedor del botón

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

}

almost 3 years ago · Juan Pablo Isaza
2 answers
Answer question

0

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); }
almost 3 years ago · Juan Pablo Isaza Report

0

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>

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error