css - none - Haga clic a través de un DIV a los elementos subyacentes

don t click css

Question

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

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

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

Answer 1

1. Ocultar superposición del elemento
2. Determinar las coordenadas del cursor
3. Obtener elemento en esas coordenadas
4. Activar clic en el elemento.
5. Mostrar elemento de superposición de nuevo

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

Answer 2

Actualmente trabajo con lienzo con globos. Pero debido a que el globo con el puntero está envuelto en un div, algunos enlaces debajo de él ya no son capaces de hacer clic. No puedo usar extjs en este caso. Ver ejemplo básico para mi globo de discurso tutorial requiere HTML5

Así que decidí recopilar todas las coordenadas de enlace desde dentro 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 (nuevo) globo. Agarra las coordenadas de las esquinas izquierda / superior y derecha / abajo de un link.class: además, el atributo de nombre para saber qué hacer si alguien hace clic en esas coordenadas y me encantó establecer un 1, lo que significa que no se hizo clic. . Y desplaza esta matriz al clickarray. Podrías usar push también.

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. Esperanza fue enlish ...

Answer 3

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

Evita que el evento burbujee en el árbol DOM, evitando que se notifique al evento a los controladores principales.

Answer 4

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

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

Tenga en cuenta que necesita un elemento padre para tener una posición: relativo y luego podrá utilizar 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 distinta de la estática. Si no se encuentra dicho elemento, el bloque que contiene es html

Espero que esto ayude. Vea here para más información sobre el posicionamiento CSS.

Answer 5

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

• adjuntar un clic a la div que desea hacer clic a través
• esconderlo
• determinar en qué elemento está el puntero
• Dispara el click sobre 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 overlaying está absolutamente posicionado, no estoy seguro de si esto hace una diferencia. Esto funciona en IE8 / 9, Safari Chrome y Firefox al menos.

Answer 6

Hacer clic a través de un elemento subyacente DIV funciona diferente en los navegadores. Opera necesita el reenvío manual de eventos, Firefox y Chrome entienden pointer-events:none; CSS pointer-events:none; y 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 reenvío como Opera.

Consulte la prueba de reenvío en y . La propiedad CSS de los eventos de puntero se ha movido de CSS3-UI a CSS4-UI.

Answer 7

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

Answer 8

No, no puedes hacer clic en un elemento. Puede obtener las coordenadas del clic y tratar de averiguar qué elemento estaba debajo del elemento en el que se hizo clic, pero esto es realmente tedioso para los navegadores que no tienen document.elementFromPoint . Entonces, aún tiene que emular la acción predeterminada de hacer clic, que no es necesariamente trivial, dependiendo de los elementos que tenga debajo.

Debido a que tiene un área de ventana completamente transparente, probablemente sea mejor implementarlo como elementos de borde separados alrededor del exterior, dejando el área central libre de obstrucciones, por lo que realmente puede hacer clic directamente.

Answer 9

Otra idea para probar (según la situación) sería:

1. Pon el contenido que quieras en un div;
2. Coloque la superposición sin hacer clic en toda la página con un índice z más alto,
3. Hacer otra copia recortada del div original.
4. la superposición y la posición abs de la división div en el mismo lugar que el contenido original en el que desea hacer clic con un índice z aún mayor?

¿Alguna idea?

Answer 10

Puedes colocar una superposición AP como ...

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

<div id="overlay"></div>

simplemente póngalo donde no quiere, es decir, cliked. Funciona en todos.

Answer 11

Sí, puedes hacer esto.

Usando 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 todos los navegadores para este problema.

Usando AlphaImageLoader , incluso puede poner transparentes .PNG/.GIF s en el div superposición y hacer que los clics fluyan hacia 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ásico con todo el código.

Answer 12

También es bueno saber ...
Puede deshabilitar los eventos de puntero en un elemento principal (probablemente div transparente) pero aún así debe habilitarse 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 principales no reaccionan ante ningún evento del mouse. Para esto, todos los divs parentales obtienen pointer-events: none y sus hijos seleccionables obtienen eventos punteros que se vuelven a habilitar mediante 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>

Answer 13

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

el área ocupada por un elemento se puede encontrar al 1. obtener 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 hace esto bastante simple, aunque se puede hacer en js simple. agregar un controlador de eventos para mousemove el mousemove en el objeto de 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 determinado consiste en verificar si la posición del mouse está entre los bordes izquierdo, derecho, superior e inferior de un elemento.

Answer 14

simplemente envuelve tu etiqueta 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 punteros-eventos: ninguno; solo vas a perder

envolviendo el contenido mantendrá sus efectos de desplazamiento y puede hacer clic en todas las imágenes, div incluido, saludos!