HTML / CSS: hacer un div “invisible” para los clics?

Por varias razones, necesito poner una (casi) transparente

sobre algún texto. Sin embargo, esto significa que no se puede hacer clic en el texto (por ejemplo, para hacer clic en enlaces o seleccionarlo). ¿Sería posible simplemente hacer este div “invisible” para los clics y otros eventos del mouse?

Por ejemplo, las overlay div overlay cubren el texto, pero me gustaría poder hacer clic / seleccionar el texto a través de la div overlay :

 

Some text

... some content ...

Se puede hacer usando pointer-events CSS. Esta propiedad es compatible con Firefox 3.6+, Chrome 2+, IE 11+ y Safari 4+. Lamentablemente, no tengo conocimiento de una solución alternativa para varios navegadores.

 #overlay { pointer-events: none; } 

Se puede hacer reactivando el evento después de ocultar temporalmente la superposición.

Vea la primera respuesta a esta pregunta: “superposición” de HTML que permite que los clics entren en los elementos que se encuentran detrás.

Puedes hacer esto ocultando la superposición así:

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

Usa este jQuery

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

reemplace “div” con la ID o elemento

Alternativa para deshabilitar todos los eventos (o chick) en un div es desvincular () todos los eventos que están adjuntos con tags de forma predeterminada

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

o

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