What alternative mode could be used to block the click effect on an HTML element?

Question

What alternative mode could be used to block the click effect on an HTML element?

Navigation

#1 by (1 votes)

1

Based on an example put by Sergio - How prevent a click on a link / anchor or element with event tied

Example of my authorship

var ancora = document.getElementsByClassName('baixar');

for (var i in ancora) {
    document.captureEvents(Event.MOUSEUP | Event.MOUSEDOWN | Event.CLICK | Event.DBLCLICK)
    ancora[i].onclick = colorir;
    ancora[i].ondblclick = colorir;
    ancora[i].onmouseup = colorir;
    ancora[i].onmousedown = colorir;
}

function colorir() {
    var bloqueado = true;
    if (bloqueado) return false;
}

<div id='lista'>
    <p><a href="https://sites.google.com/site/mplayerplugin/repositorio/skate.webm">Skate</a></p>
    <p><a href="https://sites.google.com/site/mplayerplugin/repositorio/animais_cantando.webm" class="baixar">Animais cantando</a></p>
    <p><a href="https://sites.google.com/site/mplayerplugin/repositorio/equipment_these_days.webm" class="baixar">Equipment these days</a></p>
    <p><a href="https://sites.google.com/site/mplayerplugin/repositorio/peck_pocketed.webm" class="baixar">Peck Pocketed</a></p>
    <p><a href="https://sites.google.com/site/mplayerplugin/repositorio/procurando_dory.webm">Procurando Dory 2</a></p>
</div>

Quote from Sergio

One last suggested option here is to block this element with another element. By using z-index it is possible to override another element, in this case transparent so that the user does not notice (and not ruin the layout) override this element that wants to "protect" from clicks, or other interaction. Note that this option prevents for example from selecting text and other events in elements that may be visible, thus being inaccessible to the user.

example

And it would be like Sergio did in this given example. However I wanted something simpler, a readable, didactic semantics.

javascript css click

asked by anonymous 02.04.2017 / 21:44

1 answer

How to invert mouse click events? Domain pointing to an IP with port?

score 1 · Accepted Answer

You can create a div#bloqueador within #lista , and then the CSS you need would be:

#lista {
  position: relative;
}

#bloqueador {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

So one of the descendant elements of #lista would take its size and width and would overlap the content, making it visible but not "clickable."

section div {
  float: left;
  width: 40%;
  margin: 5%;
}

#lista {
  position: relative;
}

#bloqueador {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

<section>Algo</section>
<section>
  <div>
    <h3>O que é o Lorem Ipsum?</h3>
    <p>
      O Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão. O Lorem Ipsum tem vindo a ser o texto padrão usado por estas indústrias desde o ano de 1500, quando uma misturou os caracteres de um texto para criar um espécime de livro. Este texto
      não só sobreviveu 5 séculos, mas também o salto para a tipografia electrónica, mantendo-se essencialmente inalterada. Foi popularizada nos anos 60 com a disponibilização das folhas de Letraset, que continham passagens com Lorem Ipsum, e mais recentemente
      com os programas de publicação como o Aldus PageMaker que incluem versões do Lorem Ipsum.</p>
  </div>
  <div id='lista'>
    <p><a href="https://sites.google.com/site/mplayerplugin/repositorio/skate.webm">Skate</a></p>
    <p><a href="https://sites.google.com/site/mplayerplugin/repositorio/animais_cantando.webm" class="baixar">Animais cantando</a></p>
    <p><a href="https://sites.google.com/site/mplayerplugin/repositorio/equipment_these_days.webm" class="baixar">Equipment these days</a></p>
    <p><a href="https://sites.google.com/site/mplayerplugin/repositorio/peck_pocketed.webm" class="baixar">Peck Pocketed</a></p>
    <p><a href="https://sites.google.com/site/mplayerplugin/repositorio/procurando_dory.webm">Procurando Dory 2</a></p>
    <div id="bloqueador"></div>
  </div>
</section>