Double event on jQuery click

Question

I am on time having problems with jQuery events. I have used all the best practices to stop the double event of click. Following are examples:

.off()
e.preventDefault();
e.stopPropagation();
unbid('click');

Always when there is a click I perform this function

function LoadingTela(botao,tipo) {
     if (tipo == true) {
       $(botao).prop("disabled", true); 
       $('.mask-loading').show(); 
     }else { 
       $(botao).prop("disabled", false); 
       $('.mask-loading').hide(); 
     } 
 }

Has anyone come up with any solution or new event control?

Answer 1

You can try with the function one jQuery. It is similar to the function on, except that the event is removed from the element only its first execution, i.e., for the example below the function in the event click will be executed only once.

$('#btn').one('click', event => {
  console.log('Botão pressionado');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">Pressione-me!</button>

If it is possible that the event is triggered multiple times on the same page and the intention is only to protect from multiple clicks simultaneous, you can disable the button (or element that triggers the event) while processing the application:

$('#btn').on('click', function(event) {
  $(this).prop('disabled', true);
  console.log('Botão pressionado');
  
  // processando o evento click...
  
  $(this).prop('disabled', false);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">Pressione-me!</button>