Disable click on the body for a period of time

Question

Disable click on the body for a period of time

Navigation

#1 by (4 votes)
#2 by (3 votes)
#3 by (2 votes)
#4 by (1 votes)
#5 by (0 votes)

2

I'd have some way to disable the click events of my body . When I call a function I would like to disable the events in the processing that is a bit time consuming and when I finish activating again. I've already used jQuery to add the pointer-events:none; style, but got a problem since my page is dynamically mounted in the middle of this function and my events from hover are bugged. Is there any CSS type clicks-events or something like that 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-contentclass="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/>

html jquery angularjs css

asked by anonymous 15.12.2017 / 13:52

5 answers

3

Other responses suggested creating a% transparent% on the page. This is really the best way, but you can do it in a simpler way:

Create div in div with body :

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

Disable id with div or enable $('#tela').hide();

15.12.2017 / 17:01

2

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

Create a div

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

Set 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>

15.12.2017 / 14:43

1

I do not know if it suits you, but a technique is you only make an overlay with a <div> over the other elements. But the keyboard keys will still work, think about it.

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>

15.12.2017 / 14:32

0

Disables clicks on the entire "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>Executandoafunçãodobotãoabaixoosclickssóvoltamafuncionardepoisde10segundos<divid="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="https://pt.stackoverflow.com/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><inputtype="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 handlers from parent elements, and also prevents any other handlers from the same trigger element.

15.12.2017 / 17:25

Is it possible to concatenate a jQuery selector with a variable? Pointers and arrays picking up something not expected

score 4 · Accepted Answer

You can disable all click events, just assign a stopPropagation() to the root event, so all others are disabled until the listener has been 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://pt.stackoverflow.com">SOpt</a>          
        </div>
        <button onclick="desabilitarClick()">Desabilitar por 5 segundos</button>