HTML / CSS: ¿Hacer un div "invisible" a los clics?

98

Por varias razones, necesito poner un (mayormente) transparente <div>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 que este div sea "invisible" a los clics y otros eventos del mouse?

Por ejemplo, el overlaydiv cubre el texto, pero me gustaría poder hacer clic / seleccionar el texto a través del 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
fuente

1

La respuesta corta es no. (Se ha discutido varias veces, pero los incautos son difíciles de encontrar para esto, no puedo pensar en buenas palabras clave ...) ¿Para qué necesitas el DIV transparente?

— Pekka

2

No creo que eso sea posible. Tal vez cuente las "diversas razones", es decir, ¿qué es lo que realmente desea lograr?

— davehauser

1

@Null Retendría el -1 hasta que quede claro lo que quiere hacer el OP.

— Pekka

1

NullUserException: ¿Cómo impediría lo que propone que las personas copien contenido de su sitio web? En todo caso, está tratando de hacer lo contrario: desea obviar el efecto de su div transparente (de hacer que el texto sea más difícil de hacer clic y seleccionar).

— Hammerite

@Hammer Tienes razón. Eliminé el voto negativo.

— NullUserException

159

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

#overlay {
  pointer-events: none;
}

— Ionuț G. Stan
fuente

3

¡Ah, eso se ve bien! Ahora, el único problema es que tengo que hacer que algunos de los niños acepten eventos de puntero ... Pero tal vez pueda resolver eso. ¡Gracias!

— David Wolever

2

Genial: pointer-events: visibleparece que hará exactamente lo que quiero. ¡Gracias!

— David Wolever

¡Funciona en cromo! ¡Me encanta que esto sea posible!

— BT

Hay un polyfill de eventos de puntero: github.com/kmewhort/pointer_events_polyfill

— rink.attendant.6

¡La respuesta más sencilla y directa!

— Jones G

2

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

Consulte la primera respuesta a esta pregunta: "superposición" HTML que permite que los clics pasen a los elementos que se encuentran detrás.

— Joeri Sebrechts
fuente

0

Puede hacer esto ocultando la superposición de esta manera:

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
fuente

0

Utilice este jQuery

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

reemplace "div" con el ID o elemento

— Dean Van Greunen
fuente

-1

La alternativa para deshabilitar todos los eventos (o chick) en un div es unbind () todos los eventos que están adjuntos con etiquetas de forma predeterminada

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

o

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

— Muhammad Nasir
fuente

jqueryahora usa off()a favor de unbind(), y solo elimina los controladores, no evita que el div capture el clic.

— pmoleri