Disable body click for a period of time

Question

Would there be some way to disable my click events body. When I call a function I would like to disable the events in the processing which is a little time consuming and when it finishes activating again. I’ve used jQuery to add style pointer-events:none;, but got a problem as my page is mounted dynamically in the middle of this function my events of hover get bugged. Would have some CSS like clicks-events or something similar using jQuery?

function getProspect() {
   $('body').addClass('desabilitaEventos');
   $('#loadingBar').fadeIn(1000);

   //...

   $('#loadingBar').fadeOut();
   $('body').removeClass('desabilitaEventos'); 
}

.desabilitaEventos{
  pointer-events: none;
  cursor: default;
}
#loadingBar{
  position: fixed;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<md-content class="md-padding backgroud-templates" style="min-height: 700px;">
  <div id="loadingBar" class="lds-css ng-scope" style="display:none;">
    <div style="width:100%;height:100%" class="lds-eclipse">
        <div></div>
    </div>    
  </div>  
<md-content/>

Answer 1

It is possible to disable all click event, just assign a stopPropagation() in the root event, so all others are rendered impossible until the listener out removed...

ativo = false;
        function desabilitar(e){
              e.stopPropagation();
              e.preventDefault();

          }
        function desabilitarClick (e) {
          if(ativo === false) {
          document.addEventListener("click",desabilitar,true);
          }
          
          ativo = true;
          
          setTimeout(function(){ document.removeEventListener("click",desabilitar,true); }, 5000);
        }
        function alertar() {
          alert('stackoverflow')
        }

div {
          height : 200px;
          width: 200px;
          background: green;
        }

<div onclick="alertar()">
          Click aqui
        <a href="https://answall.com">SOpt</a>          
        </div>
        <button onclick="desabilitarClick()">Desabilitar por 5 segundos</button>

Answer 2

The other answers suggested creating a div transparent about the page. Really this is the best way, but it is possible to do it in a simpler way:

Create a div in the body with a id:

<div id="tela"></div>

Add styles in CSS:

#tela {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: fixed;
    background-color: rgba(1, 1, 1, 0.6);
    z-index: 999;
}

Disables the div with $('#tela').hide(); or enable $('#tela').show();

Answer 3

I believe that desabilitar event is not possible if I’m wrong correct me. But you can do the following:

Create a div

<div id="overlay"></div>

Define the CSS

#overlay {
  position: fixed; /* Posição fixada */
  width: 100%; /* Largura */
  height: 100%; /* Altura */
  top: 0; /* Define a posição topo como 0 */
  left: 0; /* Define a posição esquerda como 0 */
  display: none; /* oculta */
  z-index: 9999; /* posiciona acima de todos os elementos. */
}

Example:

let BTN = document.querySelector('button');
let OVERLAY = document.querySelector('#overlay');

BTN.addEventListener('click', (ev) => {
  console.log('Tente clicar no botão !! :) ');
  OVERLAY.style.display = 'block'; // Exibe a div
  setTimeout(() => {
    console.log('Agora você pode clicar no botão novamente !! :D ');
    OVERLAY.style.display = 'none';
  }, 5000); // Para exemplo, apos 5 segundos oculta a div
});

#overlay {position: fixed; width: 100%; height: 100%; top: 0; left: 0; display: none; z-index: 9999; background: #000; }

<div id="overlay"></div>
<button>BLOQUEAR</button>

Answer 4

I don’t know if it suits you, but one technique is you do just one overlay with a <div> above the other elements. But the keyboard keys will continue to work, think about it too.

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
div {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

<input type="submit" id="consultar" value="Consultar" value="Show Div" onclick="showDiv()" /><br>
<input type="text">
<div class=""></div>

Answer 5

Disables clicks throughout the "document"

function getProspect() {

document.getElementById("demo").innerHTML = '<button type="button"/>Aguardando</button>';
    
    //Para desativar todo o clique do mouse no documento
	var event = $(document).click(function(e) {
        // Desativa todos os buttons e inputs
        $(':button,:input').prop('disabled', true);
        //Impede a propagação do evento atual.
        e.stopPropagation();
	    //Cancela o evento se for cancelável, sem parar a propagação do mesmo
        e.preventDefault();
	    e.stopImmediatePropagation();
	    return false;
	});
	
	//para habilitá-los novamente após 10 segundos
	setTimeout( function() {
        // Ativa todos os buttons e inputs
         $(':button,:input').prop('disabled', false);
         $(document).unbind('click');
	     document.getElementById("demo").innerHTML = '<button type="button" onclick="getProspect()"/>Executar função</button>';
	}, 10000 );

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Executando a função do botão abaixo os clicks só voltam a funcionar depois de 10 segundos

<div id="demo"><button type="button" onclick="getProspect()"/>Executar função</button></div><br><br>

<input type="button" onclick="alert('Olá')" value="Botão alerta do ÐvÐ"/>
<br>
<div><a href="/unanswered">pt.stackoverflow</a></div>

<div><a href="https://webmasters.stackexchange.com/">webmasters.stackexchange</a></div>
<br>
<a href="https://webmasters.stackexchange.com/">
<img border="0" src="https://i.stack.imgur.com/066AS.gif"></a>
<br>
<input type="button" id="myBtn" value="Botão">
<input type="button" id="myBtn2" value="Outro Botão">
<br>
<input id="" type="submit" value="Input"> <input id="" type="submit" value="Outro Input">

stopImmediatePropagation(), prevents parent elements handlers, and also prevents any other Handler from the same shooting element.