How to prevent the focusout event from firing when minimizing the browser?

Asked

Viewed 24 times

0

I’m using the focusout event to call a function when the field loses focus. The problem is that when I minimize the browser window, the event fires because it seems to lose focus. The same occurs when the function calculate_financeir_parcela_moviment_calculos_default() performs an ajax call, because it seems that the focus is lost and the event triggers.

Is there any way to prevent the focusout event from firing in these situations?

$('#txt-financeiro-parcela-movimento-valor-pago').focusout(function (e) {
    e.preventDefault();
    calcular_financeiro_parcela_movimento_calculos_padrao();
});

function calcular_financeiro_parcela_movimento_calculos_padrao(tipoCalculo = FINANCEIRO_PARCELA_MOVIMENTO_CALCULOS_PADRAO_TIPO_CALCULAR_APENAS_PERCENTUAIS) {

    //startLoadGlobal(SPINNER_CALCULAR_VALOR_PARCELA);

    var financeiroParcelaId = $('#hid-financeiro-parcela-movimento-financeiro-parcela-id').val();

    var valorASerPago = $("#txt-financeiro-parcela-movimento-valor-a-ser-pago").val();
    var valorPago = $("#txt-financeiro-parcela-movimento-valor-pago").val();
    var valorTotal = $("#txt-financeiro-parcela-movimento-valor-total").val();
    var valorJuros = $('#txt-financeiro-parcela-movimento-valor-juros').val();
    var percentualJuros = $('#txt-financeiro-parcela-movimento-percentual-juros').val();
    var valorDesconto = $('#txt-financeiro-parcela-movimento-valor-desconto').val();
    var percentualDesconto = $('#txt-financeiro-parcela-movimento-percentual-desconto').val();
    var valorMulta = $('#txt-financeiro-parcela-movimento-valor-multa').val();
    var percentualMulta = $('#txt-financeiro-parcela-movimento-percentual-multa').val();
    var valorDesconto = $('#txt-financeiro-parcela-movimento-valor-desconto').val();

    var financeiroParcelaMovimentoCalculosPadraoViewModel = {
        FinanceiroParcelaId: financeiroParcelaId,
        FinanceiroParcelaMovimentoCalculosPadraoTipo: tipoCalculo,
        ValorASerPago: valorASerPago ? converterFormatoMoedaBrasileiraParaFormatoPadrao(valorASerPago) : 0,
        ValorTotal: valorTotal ? converterFormatoMoedaBrasileiraParaFormatoPadrao(valorTotal) : 0,
        ValorPago: valorPago ? converterFormatoMoedaBrasileiraParaFormatoPadrao(valorPago) : 0,
        ValorJuros: valorJuros ? converterFormatoMoedaBrasileiraParaFormatoPadrao(valorJuros) : 0,
        PercentualJuros: percentualJuros ? converterFormatoMoedaBrasileiraParaFormatoPadrao(percentualJuros) : 0,
        ValorMulta: valorMulta ? converterFormatoMoedaBrasileiraParaFormatoPadrao(valorMulta) : 0,
        PercentualMulta: percentualMulta ? converterFormatoMoedaBrasileiraParaFormatoPadrao(percentualMulta) : 0,
        ValorDesconto: valorDesconto ? converterFormatoMoedaBrasileiraParaFormatoPadrao(valorDesconto) : 0,
        PercentualDesconto: percentualDesconto ? converterFormatoMoedaBrasileiraParaFormatoPadrao(percentualDesconto) : 0
    };

    var dataParameter = $.param(financeiroParcelaMovimentoCalculosPadraoViewModel);

    $.ajax({
        url: "/financeiro-parcela-movimento-gerenciar/financeiro-parcela-movimento-calcular-valores-padrao",
        type: "GET",
        data: dataParameter,
        traditional: true,
        success: function (data) {

            stopLoadGlobal();

            if (typeof data.success !== 'undefined') {
                if (!data.success) {
                    swal("Oops", data.message, "error");

                    return false;
                }
            }

            $("#txt-financeiro-parcela-movimento-valor-a-ser-pago").val(data.financeiroParcelaMovimentoCalculosPadrao.valorASerPago.toLocaleString('pt-br', { minimumFractionDigits: 2 }));
            $("#txt-financeiro-parcela-movimento-percentual-desconto").val(data.financeiroParcelaMovimentoCalculosPadrao.percentualDesconto.toLocaleString('pt-br', { minimumFractionDigits: 2 }));
            $("#txt-financeiro-parcela-movimento-percentual-juros").val(data.financeiroParcelaMovimentoCalculosPadrao.percentualJuros.toLocaleString('pt-br', { minimumFractionDigits: 2 }));
            $("#txt-financeiro-parcela-movimento-percentual-multa").val(data.financeiroParcelaMovimentoCalculosPadrao.percentualMulta.toLocaleString('pt-br', { minimumFractionDigits: 2 }));
            $("#txt-financeiro-parcela-movimento-valor-total").val(data.financeiroParcelaMovimentoCalculosPadrao.valorTotal.toLocaleString('pt-br', { minimumFractionDigits: 2 }));
            $("#txt-financeiro-parcela-movimento-valor-pago").val(data.financeiroParcelaMovimentoCalculosPadrao.valorPago.toLocaleString('pt-br', { minimumFractionDigits: 2 }));
        },
        error: function () {
            stopLoadGlobal();
            alert("Oops! Algo deu errado.");
            return false;
        }
    });

1 answer

1


I think the only way to prevent this behavior is by using a control flag. See the following example:

let windowFocused = true;

$(window).blur(function(){
  windowFocused = false;
});

$(window).focus(function(){
  windowFocused = true;
});

$('#txt-financeiro-parcela-movimento-valor-pago').focusout(function(e) {
  setTimeout(() => {
    if (!windowFocused) return;

    e.preventDefault();
    console.log('Focus out ...');
  }, 0);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" id="txt-financeiro-parcela-movimento-valor-pago" />

  • I don’t know how to thank you @dfvc. It worked correctly :)

Browser other questions tagged

You are not signed in. Login or sign up in order to post.