Pase los eventos del mouse a través de un elemento ubicado

Estoy tratando de capturar eventos del mouse en un elemento con otro elemento absolutamente posicionado encima.

En este momento, los eventos en el elemento en una posición absoluta lo golpean y burbujean hasta su padre, pero quiero que sea "transparente" para estos eventos del mouse y reenviarlos a lo que esté detrás de él. ¿Cómo debo implementar esto?

pointer-events: none;

Es una propiedad CSS que hace que los eventos "pasen" por el elemento al que se aplica y hace que el evento ocurra en el elemento "debajo".

Ver para más detalles: https://developer.mozilla.org/en/css/pointer-events

No es compatible hasta IE 11; todos los demás proveedores lo respaldan desde hace bastante tiempo (el soporte global fue de ~ 92% en 12 / '16): http://caniuse.com/#feat=pointer-events (gracias a @ s4y por proporcionar el enlace en los comentarios) .

Si todo lo que necesita es el mousedown, puede hacerlo con el document.elementFromPointmétodo de la siguiente manera:

1. quitando la capa superior en mousedown,
2. pasando las coordenadas xy ydel evento al document.elementFromPointmétodo para obtener el elemento debajo, y luego
3. Restaurando la capa superior.

También es bueno saber ...
Los eventos de puntero se pueden deshabilitar para un elemento primario (probablemente div transparente) y, sin embargo, se pueden habilitar para elementos secundarios. Esto es útil si trabaja con varias capas div superpuestas, donde desea poder hacer clic en los elementos secundarios de cualquier capa. Para esto, todos los divs parenting obtienen pointer-events: noney click-children obtienen eventos de puntero reactivados porpointer-events: all

.parent {
    pointer-events:none;        
}
.child {
    pointer-events:all;
}

<div class="some-container">
   <ul class="layer-0 parent">
     <li class="click-me child"></li>
     <li class="click-me child"></li>
   </ul>

   <ul class="layer-1 parent">
     <li class="click-me-also child"></li>
     <li class="click-me-also child"></li>
   </ul>
</div>

La razón por la que no está recibiendo el evento es porque el elemento en posición absoluta no es un elemento secundario del elemento que desea "hacer clic" (div azul). La forma más clara en la que puedo pensar es poner el elemento absoluto como hijo del que desea hacer clic, pero supongo que no puede hacer eso o no habría publicado esta pregunta aquí :)

Otra opción sería registrar un controlador de evento de clic para el elemento absoluto y llamar al controlador de clic para el div azul, haciendo que ambos parpadeen.

Debido a la forma en que los eventos surgen a través del DOM, no estoy seguro de que haya una respuesta más simple para ti, ¡pero tengo mucha curiosidad si alguien más tiene algún truco que no conozca!

Hay una versión de JavaScript disponible que redirige manualmente los eventos de un div a otro.

Lo limpié y lo convertí en un complemento jQuery.

Aquí está el repositorio de Github: https://github.com/BaronVonSmeaton/jquery.forwardevents

Desafortunadamente, el propósito para el que lo estaba usando: la superposición de una máscara sobre Google Maps no capturó los eventos de clic y arrastre, y el cursor del mouse no cambia, lo que degrada la experiencia del usuario lo suficiente como para que decidiera ocultar la máscara debajo de IE y Opera. los dos navegadores que no admiten eventos de puntero.

Si conoce los elementos que necesitan eventos del mouse, y si su superposición es transparente, puede establecer el índice z de ellos en algo más alto que la superposición. Por supuesto, todos los eventos deberían funcionar en ese caso en todos los navegadores.