¿Cómo prevenir la fuga de un evento a través de un elemento superpuesto en IE?

Question

Dado el siguiente código HTML:

<div class="with-shield"> 
    <div class="shield"></div> 
    <input type="radio"/> 
</div> 
​ 

... y CSS:

.with-shield { 
    position: relative; 
} 

.shield { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    z-index: 100; 
} 

(Fiddle).

Firefox y Chrome no sin dejar de hacer clic en el botón de radio (como el .shield se coloca sobre la parte superior de la misma), sin embargo IE9 (y supongo que las versiones anteriores) hace (a pesar de que las herramientas de desarrollo muestra .shield es correcta en su lugar) .

¿Cómo puedo cambiar la CSS para que absorba .shield eventos de clic (es decir, para detener a un usuario pueda seleccionar la radio) en el IE?

Necesito esto como que estoy presentando los resultados de un cliente encuesta a los empleados, simplemente al volver a mostrar la vista de formulario; Quiero agregar una superposición para evitar que los empleados cambien los valores accidentalmente (ya he deshabilitado tabIndex, etc.).

Answer 1

poco tarde, pero hacer algo como esto:

#BlockAction{bottom: 0; left: 0; position: absolute; top: 0; right:0; z-index: -1;} 
#BlockAction.Blocked{z-index: 1000; cursor:wait;background-color:#fff;opacity:0} 

El color de fondo y la opacidad se atienden a IE9 fondo transparente permitiendo que hace clic para ir a través. Otros navegadores captan el clic sin él.

Answer 2

Acabo de tener el mismo problema recientemente. de muthu Kumaran es grande, excepto que no tenía en cuenta IE < 8. Aquí es cómo puede hacerlo:

.with-shield { 
    position: relative; 
} 

.shield { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    z-index: 100; 

background-color:#fff; 
opacity:0; 
filter: alpha(opacity = 001); 

} 

Desafortunadamente, ni jsFiddle ni jsbin está funcionando correctamente en IE8 así que puedo mostrar, pero he creado una página de prueba en mi máquina local y probado y funciona como se esperaba.

Answer 3

Y aún más tarde a la fiesta, pero esto es lo que hice:

Sólo tiene que utilizar una codificación base64 de un GIF transparente de 1x1 píxeles como fondo, esto detiene todos los clics/grifos (también probados en IE9 e IE8)

background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);