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

Question

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

Example of my own making

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>

Said in the title, and seen in the example in snippet would like to block the onclick on all elements of the div list.

Citation of Sergio

A last option suggested here is to block this element with another element. Using the z-index it is possible to override another element, in this case transparent to without the user noticing (and without spoiling the layout) superimpose this element that wants to "protect" from clicks, or other interaction. Note that this option prevents, for example, selecting text and other events in elements that may be visible, making it inaccessible to the user.

example

And it would be like Sergio did in this instance. Yet I wanted something simpler, a readable semantics, didactic.

Answer 1

You can create a div#bloqueador inside #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;
}

Thus, one of the descending elements of #lista would take its size and width and would be superimposed on the content, leaving 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>