javascript - navegador - Pasa los eventos del ratón a través del elemento posicionado absolutamente.

llamar funcion javascript desde html onclick

Question

Estoy intentando capturar eventos del mouse en un elemento con otro elemento posicionado absolutamente encima de él.

En este momento, los eventos en el elemento de posición absoluta lo golpean y se propagan hasta su padre, pero quiero que sea "transparente" para estos eventos del mouse y los reenvíe a lo que haya detrás. ¿Cómo debo implementar esto?

Answer 1

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

Lo limpié y lo convertí en un plugin de 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 capturaba los eventos de clic y arrastre, y el cursor del mouse no cambia, lo que degrada la experiencia del usuario lo suficiente, así que simplemente decidí ocultar la máscara en IE y Opera - Los dos navegadores que no admiten eventos de puntero.

Answer 2

La razón por la que no está recibiendo el evento es porque el elemento de posición absoluta no es un elemento secundario del elemento que desea "hacer clic" (div azul). La forma más limpia en la que puedo pensar es poner el elemento absoluto como un elemento secundario del que quiere 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 clic para el div azul, causando que ambos parpadeen.

Debido a la forma en que los eventos se propagan a través del DOM, no estoy seguro de que haya una respuesta más simple para ti, pero tengo mucha curiosidad de que alguien más tenga trucos que no conozco.

Answer 3

Si conoce los elementos que necesitan eventos del mouse, y si su superposición es transparente, simplemente 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.

Answer 4

Si todo lo que necesita es una reducción, puede ser capaz de conformarse con el método document.elementFromPoint , mediante:

1. quitando la capa superior en mousedown,
2. pasando las coordenadas x e y del evento al método document.elementFromPoint para obtener el elemento que se encuentra debajo y luego
3. Restaurando la capa superior.

Answer 5

También es bueno saber ...
Los eventos de puntero se pueden deshabilitar para un elemento principal (probablemente div transparente) y aún así habilitarse para elementos secundarios. Esto es útil si trabaja con varias capas div superpuestas, en las que desea poder hacer clic en los elementos secundarios de cualquier capa. Para esto, todos los divs parentales obtienen pointer-events: none y click-children obtienen eventos de puntero que se vuelven a habilitar por eventos de pointer-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>

Answer 6

pointer-events: none;

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

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

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