Pasar eventos del mouse a través de un elemento absolutamente posicionado
Estoy intentando capturar eventos del mouse en un elemento con otro elemento absolutamente posicionado encima.
En este momento, los eventos en el elemento en posición absoluta lo golpean y suben a su elemento principal, pero quiero que sea "transparente" para estos eventos del mouse y los reenvíe a lo que sea que esté detrás de él. ¿Cómo debo implementar esto?
pointer-events: none;
Es una propiedad CSS que hace que los eventos "pasen a través" del elemento HTML al que se aplica la propiedad. Hace que el evento ocurra en el elemento "abajo".
Consulte para obtener más detalles: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
Es compatible con casi todos los navegadores, incluido IE11; el soporte global fue ~98,2% en 05/'21): http://caniuse.com/#feat=pointer-events (gracias a @s4y por proporcionar el enlace en los comentarios).
También es bueno saberlo...
Los eventos de puntero se pueden deshabilitar para un elemento principal (probablemente un div transparente) y aún así habilitarse para elementos secundarios. Esto es útil si trabaja con varias capas div superpuestas y desea poder hacer clic en los elementos secundarios de cualquier capa. Para esto, todos los divs de crianza obtienen pointer-events: noney los niños clic 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>
Si todo lo que necesita es presionar el mouse, es posible que pueda conformarse con el document.elementFromPointmétodo:
- eliminando la capa superior al presionar el mouse,
- pasando las coordenadas
xyydel evento aldocument.elementFromPointmétodo para obtener el elemento debajo, y luego - Restaurando la capa superior.
La razón por la que no recibe el evento es porque el elemento en posición absoluta no es hijo del elemento en el que desea hacer "clic" (div azul). La forma más limpia que se me ocurre 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 eventos de clic para el elemento absoluto y llamar al controlador de clics 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 usted, pero tengo mucha curiosidad por saber si alguien más tiene algún truco que no conozco.
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: superponer una máscara sobre Google Maps no capturaba los eventos de hacer clic y arrastrar, y el cursor del mouse no cambia, lo que degrada tanto la experiencia del usuario que decidí ocultar la máscara en IE y Opera. los dos navegadores que no admiten eventos de puntero.
