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


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

Actualmente, puedo hacer clic en los elementos subyacentes cuando hago clic fuera de la superposición div. Sin embargo, no puedo hacer clic en los elementos subyacentes al hacer clic directamente en la superposición div.

Quiero poder hacer clic a través de este div para que pueda hacer clic en los elementos subyacentes.

My Problem


1236
2017-09-09 20:42


origen


Respuestas:


Sí tú PODER hacer esto.

Utilizando pointer-events: none junto con las 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.

Utilizando AlphaImageLoader, incluso puedes poner transparente .PNG/.GIFs en la superposición div y hacer clics fluir 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 un página de ejemplo básico con todo el código.


2127
2018-01-29 21:49



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 reaccionan en absoluto a ningún evento de mouse. Para esto, todos los divs de crianza se vuelven pointer-events: none y sus niños clicables obtienen eventos de puntero reactivados por pointer-events: auto 

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

<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>

186
2017-11-07 11:06



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

Ver 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.


37
2017-10-16 17:26



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.


16
2018-05-16 17:25



  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 ();
    });


11
2018-02-20 20:04



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');
});

6
2017-07-11 19:29



Actualmente trabajo con globos de diálogo de lienzo. 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 ejemplo básico para mi tutorial de globo de discurso  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 ...


5
2018-01-09 13:36



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. agregando un manejador de eventos para mousemove sobre el document objeto 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.


4
2017-09-09 20:45



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?


3
2018-02-26 22:32



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.


2
2017-09-09 21:27



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

<a href="/categories/1">
    <img alt="test1" class="img-responsive" src="/assets/photo.jpg" />
        <div class="caption bg-orange">
            <h2>
                test1
            </h2>
        </div>
</a>

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

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


2
2018-02-16 21:28