reemplazar - recargar div en javascript

Pasar clics del mouse a través de un elemento superpuesto<div>

Question

¿Es posible pasar clics del mouse a través de un elemento superpuesto?

<div style="background: url(''img/rain.png''); z-index: 100; width: 100%; height: 100%; top: 0; bottom: 0; left: 0; right: 0;"></div>

hasta elementos subyacentes (párrafos, imágenes, enlaces, etc.)?

O redactado de otra manera:

¿Hay alguna forma de crear una superposición / capa puramente estética en HTML, CSS y / o JavaScript?

Answer 1

Podría asignar un evento de clic de mouse al div que cubre, luego recorrer todos los elementos que sepa que podrían estar debajo, inspeccionar su posición, ancho y alto para ver si esa ubicación del clic del mouse estaba dentro de sus bordes, y si era , llama a su evento onclick.

Para hacer que el subconjunto de elementos posibles sea más pequeño, podría dar elementos seleccionables que podrían estar bajo el div, una clase especial.

Answer 2

Veo que estás usando "rain.24.png" ¿está la superposición animada? Al igual que en usted está reposicionando las imágenes para simular la lluvia? Si este es el caso, entonces sería mejor detener / ocultar la animación en el mousedown y luego activar la función en los elementos subyacentes usando mouseup.

Si ese no es el caso, utilice la respuesta de Vincent para obtener el elemento, luego llame a la función asociada o use el disparador para simular el clic.

Answer 3

Esto se puede resolver usando CSS:

div { pointer-events:none; }

Compatible con IE 11+, Chrome, Firefox, Safari y Opera.

Más detalles: https://developer.mozilla.org/en-US/docs/CSS/pointer-events

Answer 4

Podría tratar de recuperar las coordenadas del mouse en su evento click y luego recuperar un elemento ocultando su superposición, usar document.elementFromPoint(x, y) y luego volver a mostrar la superposición.

Consulte esta pregunta SO para obtener más información sobre elementFromPoint:

¿Cómo encuentro el nodo DOM que está en una posición dada (X, Y)? (Prueba de golpe)