1

Baseado num exemplo posto por Sergio - Como impedir um click sobre um link/âncora ou elemento com evento amarrado

Exemplo de minha autoria

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>

Dito no título, e visto no exemplo no snippet gostaria de bloquear o onclick sobre todos elementos filhos da div lista.

Citação de Sergio

Uma última opção sugerida aqui é bloquear esse elemento com outro elemento. Usando o z-index é possivel sobrepôr um outro elemento, neste caso transparente para sem o utilizador se aperceber (e sem estragar o layout) sobrepôr este elemento que se quere "proteger" de cliques, ou outra interação. Note-se que esta opção impede por exemplo de selecionar texto e outros eventos em elementos que podem estar visíveis, ficando assim inacessíveis ao utilizador.

exemplo

E seria como Sergio fez neste exemplo dado. No entanto queria algo mais simplório, uma semântica legível, didática.

1
  • Queres bloquear o link com outro elemento para não poder selecionar ou somente impedir eventos de mouse? no ultimo caso pinter events seria o melhor...
    – Sergio
    2/04/2017 às 19:51

1 Resposta 1

1

Podes criar uma div#bloqueador dentro de #lista, e depois o CSS que precisas seria:

#lista {
  position: relative;
}

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

Assim, um dos elementos descendentes de #lista tomaria o seu tamanho e largura e ficaria sobreposto ao conteúdo, deixando-o visivel mas não "clicável".

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>

3
  • Então Sergio deste modo estava a fazer, mas ha um porém, esta div esta pareado com outra no meu futuro site, ou seja, esta lado a lado e tem outros elementos na página. Fazendo assim vou desabilitar todos demais links apresentado como menu. No caso que inibir somente a div lista com sua dimensões. Supondo que seja width: 640px por height: 360px. Desculpe pela falta de detalhe não colocado a pergunta. :\ 2/04/2017 às 20:55
  • @DiegoHenrique isso não faz diferença. Dá uma olhada ao exemplo agora, com mais conteúdo.
    – Sergio
    2/04/2017 às 21:00
  • 1
    É, realmente estava correto, parei pra analisar, o que fizeste. Perdo-me pela falta! Daria certo de todo modo. :D 2/04/2017 às 21:03

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .