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

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>

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

Isso pode ser feito reformulando o evento depois de ocultar temporariamente a sobreposição.

Veja a primeira resposta a esta pergunta: "sobreposição" de HTML, que permite que os cliques passem pelos elementos por trás dela

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

Use este jQuery

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

substitua "div" pelo ID ou elemento

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");