Haga clic a través de un DIV para elementos subyacentes

Tengo un div que tiene background:transparent , junto con el border . Debajo de este div , tengo más elementos.

Actualmente, puedo hacer clic en los elementos subyacentes cuando hago clic fuera del div superpuesto. Sin embargo, no puedo hacer clic en los elementos subyacentes al hacer clic directamente en el div superpuesto.

Quiero poder hacer clic en este div para poder hacer clic en los elementos subyacentes.

Mi problema

Sí, PUEDES hacer esto.

Usando pointer-events: none junto con declaraciones condicionales de CSS para IE11 (no funciona en IE10 o inferior), puede obtener una solución compatible con el navegador cruzado para este problema.

Con AlphaImageLoader , incluso puede colocar .PNG/.GIF transparentes en el div superposición y hacer que los clics fluyan a los elementos que se encuentran debajo.

CSS:

 pointer-events: none; background: url('your_transparent.png'); 

IE11 condicional:

 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale'); background: none !important; 

Aquí hay una página de ejemplo básica con todo el código.

También es bueno saber …
Puede deshabilitar los eventos de puntero en un elemento primario (probablemente div transparente) pero aún así habilitarlo para sus elementos secundarios.
Esto es útil si trabaja con varias capas div superpuestas, donde desea poder hacer clic en elementos secundarios, mientras que las capas padre no reactjsn en absoluto a ningún evento de mouse. Para esto, todos los divs parenting obtienen pointer-events: none y sus hijos clicables obtienen puntero-eventos reenhabilitados por pointer-events: auto

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

Hacer clic a través de un DIV al elemento subyacente funciona de forma diferente en los navegadores. Opera necesita el reenvío manual de eventos, Firefox y Chrome entienden pointer-events:none; CSS pointer-events:none; e IE no necesita nada con fondo transparente; con, por ejemplo, background:white; opacity:0; filter:Alpha(opacity=0); background:white; opacity:0; filter:Alpha(opacity=0); IE necesita reenviarse como Opera.

Consulte la prueba de reenvío en http://jsfiddle.net/vovcat/wf25Q/1/ y http://caniuse.com/pointer-events . La propiedad CSS de eventos de puntero se ha movido de CSS3-UI a CSS4-UI.

Estoy agregando esta respuesta porque no la vi aquí en su totalidad. Pude hacer esto usando elementFromPoint. Así que básicamente:

  • adjunte un clic a la div que desea que se haga clic a través de
  • esconderlo
  • determinar en qué elemento está el puntero
  • disparar el clic en el elemento allí.
 var range-selector= $("") .css("position", "absolute").addClass("range-selector") .appendTo("") .click(function(e) { _range-selector.hide(); $(document.elementFromPoint(e.clientX,e.clientY)).trigger("click"); }); 

En mi caso, el div superpuesto está absolutamente posicionado; no estoy seguro de si esto hace la diferencia. Esto funciona en IE8 / 9, Safari Chrome y Firefox al menos.

  1. Ocultar sobreponer el elemento
  2. Determine las coordenadas del cursor
  3. Obtener elemento en esas coordenadas
  4. Disparar hacer clic en el elemento
  5. Mostrar elemento superpuesto de nuevo

     $ ('# elementontop) .click (función (e) {
         $ ('# elementontop) .hide ();
         $ (document.elementFromPoint (e.clientX, e.clientY)). trigger ("click");
         $ ('# elementontop'). show ();
     });

Necesitaba hacer esto y decidí tomar esta ruta:

 $('.overlay').click(function(e){ var left = $(window).scrollLeft(); var top = $(window).scrollTop(); //hide the overlay for now so the document can find the underlying elements $(this).css('display','none'); //use the current scroll position to deduct from the click position $(document.elementFromPoint(e.pageX-left, e.pageY-top)).click(); //show the overlay again $(this).css('display','block'); }); 

Actualmente trabajo con globos de diálogo de canvas. Pero debido a que el globo con el puntero está envuelto en un div, algunos enlaces debajo ya no pueden hacer clic. No puedo usar extjs en este caso. Ver el ejemplo básico de mi globo de diálogo tutorial requiere HTML5

Así que decidí recoger todas las coordenadas del enlace desde el interior de los globos en una matriz.

 var clickarray=[]; function getcoo(thatdiv){ thatdiv.find(".link").each(function(){ var offset=$(this).offset(); clickarray.unshift([(offset.left), (offset.top), (offset.left+$(this).width()), (offset.top+$(this).height()), ($(this).attr('name')), 1]); }); } 

Llamo a esta función en cada globo (nuevo). Toma las coordenadas de las esquinas izquierda / superior y derecha / abajo de un link.class – adicionalmente el atributo de nombre para qué hacer si alguien hace clic en esas coordenadas y me encantó establecer un 1 lo que significa que no se hizo clic en jet . Y deshaga esta matriz al clickarray. También puedes usar push.

Para trabajar con esa matriz:

 $("body").click(function(event){ event.preventDefault();//if it is a a-tag var x=event.pageX; var y=event.pageY; var job=""; for(var i in clickarray){ if(x>=clickarray[i][0] && x<=clickarray[i][2] && y>=clickarray[i][1] && y<=clickarray[i][3] && clickarray[i][5]==1){ job=clickarray[i][4]; clickarray[i][5]=0;//set to allready clicked break; } } if(job.length>0){ // --do some thing with the job -- } }); 

Esta función prueba las coordenadas de un evento de clic de cuerpo o si ya se hizo clic y devuelve el atributo de nombre. Creo que no es necesario ir más profundo, pero ves que no es tan complicado. La esperanza estaba enlish …

no funciona de esa manera. el trabajo alrededor es verificar manualmente las coordenadas del clic del mouse contra el área ocupada por cada elemento.

el área ocupada por un elemento puede encontrarse encontrada por 1. obteniendo la ubicación del elemento con respecto a la parte superior izquierda de la página, y 2. el ancho y la altura. una biblioteca como jQuery lo hace bastante simple, aunque se puede hacer en js simples. la adición de un controlador de eventos para mousemove en el objeto del document proporcionará actualizaciones continuas de la posición del mouse desde la parte superior e izquierda de la página. Decidir si el mouse está sobre un objeto dado consiste en verificar si la posición del mouse está entre los bordes izquierdo, derecho, superior e inferior de un elemento.

Otra idea para intentar (situacionalmente) sería:

  1. Pon el contenido que quieres en un div;
  2. Coloque la superposición sin hacer clic sobre la página completa con un índice Z más alto,
  3. hacer otra copia recortada del div original
  4. ¿superposición y abs colocan el div de copia en el mismo lugar que el contenido original en el que desea que se pueda hacer clic con un índice z aún mayor?

¿Alguna idea?

No, no puedes hacer clic en ‘atravesar’ un elemento. Puede obtener las coordenadas del clic y tratar de determinar qué elemento estaba debajo del elemento cliqueado, pero esto es realmente tedioso para los navegadores que no tienen document.elementFromPoint . Luego, todavía tiene que emular la acción predeterminada de hacer clic, que no es necesariamente trivial, según los elementos que tenga debajo.

Como tiene un área de ventana completamente transparente, probablemente será mejor implementarlo como elementos de borde separados alrededor del exterior, dejando el área central libre de obstrucciones para que pueda simplemente hacer clic directamente.

simplemente envuelva su etiqueta a alrededor de todo el extracto html, por ejemplo

  test1 

test1

en mi ejemplo, mi clase de subtítulos tiene efectos de desplazamiento, que con eventos de puntero: ninguno; solo perderás

envolver el contenido mantendrá sus efectos de desplazamiento y puede hacer clic en toda la imagen, div incluido, ¡saludos!

Creo que puedes considerar cambiar tu marcado. Si no estoy equivocado, le gustaría poner una capa invisible sobre el documento y su marcado invisible puede estar precediendo a su imagen del documento (¿es correcto?).

En cambio, propongo que coloque lo invisible justo después de la imagen del documento pero cambiando la posición a absoluta.

Observe que necesita un elemento padre para tener posición: relativo y luego podrá usar esta idea. De lo contrario, su capa absoluta se colocará justo en la esquina superior izquierda.

Un elemento de posición absoluta se coloca en relación con el primer elemento principal que tiene una posición que no sea estática. Si no se encuentra ese elemento, el bloque contenedor es html

Espero que esto ayude. Consulte aquí para obtener más información sobre el posicionamiento de CSS.

Puede colocar una superposición de AP como …

 #overlay { position: absolute; top: -79px; left: -60px; height: 80px; width: 380px; z-index: 2; background: url(fake.gif); } 
 

simplemente colócalo donde no quieras, es decir, cliquea. Funciona en todos.

Creo que el event.stopPropagation(); debería mencionarse aquí también. Agregue esto a la función Click de su botón.

Evita que el evento burbujee en el árbol DOM, evitando que se notifique a ningún controlador principal del evento.