HTML / CSS: tornar um div “invisível” aos cliques?

98

Por vários motivos, preciso colocar um (principalmente) transparente <div>sobre algum texto. No entanto, isso significa que o texto não pode ser clicado (por exemplo, para clicar em links ou selecioná-lo). Seria possível simplesmente tornar esse div "invisível" para cliques e outros eventos do mouse?

Por exemplo, o overlaydiv cobre o texto, mas eu gostaria de poder clicar / selecionar o texto por meio do overlaydiv:

<div id="container">
    <p>Some text</p>
    <div id="overlay" style="position: absolute; top: 0;
                             left: 0; width: 100%; height:100%">
        ... some content ...
    </div>
 </div>
html css events David Wolever
fonte
1
A resposta curta é não. (Já foi discutido várias vezes, mas idiotas são difíceis de encontrar para isso, não consigo pensar em boas palavras-chave ...) Para que você precisa do DIV transparente?
Pekka
2
Não acho que seja possível. Talvez você fale sobre as "várias razões", ou seja, o que você realmente deseja alcançar?
Davehauser
1
@Null, reterei -1 até que esteja claro o que o OP deseja fazer.
Pekka
1
NullUserException - Como o que ele está propondo impediria as pessoas de copiar o conteúdo de seu site? No mínimo, ele está tentando fazer o oposto - ele deseja evitar o efeito de seu div transparente (de tornar o texto mais difícil de clicar e selecionar).
Hammerite de
@ Hammer Você está certo. Eu removi o voto negativo.
NullUserException

Respostas:

159

Isso pode ser feito usando CSS pointer-events. Esta propriedade é compatível com Firefox 3.6+, Chrome 2+, IE 11+ e Safari 4+. Infelizmente, não tenho conhecimento de uma solução alternativa para vários navegadores.

#overlay {
  pointer-events: none;
}
Ionuț G. Stan
fonte
3
Ah, isso parece bom! Agora, o único problema é que tenho que fazer algumas das crianças aceitarem eventos de ponteiro ... Mas talvez eu possa descobrir isso. Obrigado!
David Wolever
2
Legal: pointer-events: visibleparece que vai fazer exatamente o que eu quero. Obrigado!
David Wolever
Funciona em cromo! Amo que isso seja possível!
BT
Há um polyfill de eventos de ponteiro: github.com/kmewhort/pointer_events_polyfill
rink.attendant.6
A resposta mais simples e direta!
Jones G de
0

Você pode fazer isso ocultando a sobreposição desta forma:

overlay.onclick = function(){
    window.event.srcElement.style.visibility = "hidden";
    var BottomElement = document.elementFromPoint((navigator.appName.substring(0,3) == "Net") ? e.clientX : window.event.x,(navigator.appName.substring(0,3) == "Net") ? e.clientY : window.event.y);
    window.event.srcElement.style.visibility = "visible";
    BottomElement.click();
}
Pato Donald
fonte
0

Use este jQuery

$("div").click(function(e){e.preventDefault();});

substitua "div" pelo ID ou elemento

Dean Van Greunen
fonte
-1

A alternativa para desabilitar todos os eventos (ou garota) em um div é unbind () todos os eventos que são anexados com tags por padrão 

  $('#myDivId').unbind();

ou

  $('#myDivId').unbind("click");
Muhammad Nasir
fonte
jqueryagora usa a off()favor de unbind(), e apenas remove os manipuladores, não impede que o div capture o clique.
pmoleri