alternativa de propiedad css 'pointer-events' para IE
Tengo un menú de navegación desplegable en el que algunos títulos no deberían navegar a otra página cuando se hace clic (estos títulos abren un menú desplegable cuando se hace clic en ellos) mientras que otros deberían navegar (estos no tienen menú desplegable y navegan directamente). Sin embargo, ambos los tipos tienenhref Los tipos se les
Para resolver esto, agregué el siguiente CSS para el tipo de títulos anterior.
pointer-events: none;
y está funcionando bien, pero como IE no admite esta propiedad, estoy buscando alguna solución. Lo molesto es que no tengo acceso ni privilegios para cambiar el código HTML y JavaScript. por completo.
¿Algunas ideas?
Pointer-events es un truco de Mozilla y cuando se implementó en los navegadores Webkit, no se puede esperar verlo en los navegadores IE hasta dentro de un millón de años.
Sin embargo, encontré una solución:
Reenvío de eventos del mouse a través de capas
Esto utiliza un complemento que utiliza algunas propiedades de Javascript no muy conocidas/comprendidas para tomar el evento del mouse y enviarlo a otro elemento.
También hay otra solución Javascript aquí .
Actualización para octubre de 2013 : aparentemente llegará a IE en v11. Fuente . Gracias Tim.
Aquí hay otra solución que es muy fácil de implementar con 5 líneas de código:
- Capture el evento 'mousedown' para el elemento superior (el elemento que desea desactivar los eventos del puntero).
- En el 'mousedown' oculta el elemento superior.
- Utilice 'document.elementFromPoint()' para obtener el elemento subyacente.
- Mostrar el elemento superior.
- Ejecute el evento deseado para el elemento subyacente.
Ejemplo:
//This is an IE fix because pointer-events does not work in IE
$(document).on('mousedown', '.TopElement', function (e) {
$(this).hide();
var BottomElement = document.elementFromPoint(e.clientX, e.clientY);
$(this).show();
$(BottomElement).mousedown(); //Manually fire the event for desired underlying element
return false;
});
Existe una solución alternativa para IE: use SVG en línea y configure pointer-events="none" en SVG. Vea mi respuesta en ¿Cómo hacer que Internet Explorer emule eventos de puntero: ninguno?
Vale la pena mencionar que específicamente para IE, disabled=disabledfunciona para etiquetas de anclaje:
<a href="contact.html" onclick="unleashTheDragon();" disabled="disabled">Contact</a>
IE trata esto como un disabledelemento y no activa el evento de clic. Sin embargo, disabledno es un atributo válido en una etiqueta de anclaje. Por lo tanto, esto no funcionará en otros navegadores. Para ellos pointer-events:nonese requiere en el peinado.
ACTUALIZACIÓN 1 : Entonces, agregar la siguiente regla me parece una solución para todos los navegadores.
ACTUALIZACIÓN 2 : Para mayor compatibilidad, porque IE no formará estilos para etiquetas de anclaje con disabled='disabled', por lo que aún se verán activas . Por lo tanto, a:hover{}regla y estilo es una buena idea:
a[disabled="disabled"] {
pointer-events: none; /* this is enough for non-IE browsers */
color: darkgrey; /* IE */
}
/* IE - disable hover effects */
a[disabled="disabled"]:hover {
cursor:default;
color: darkgrey;
text-decoration:none;
}
Trabajando en Chrome, IE11 e IE8.
Por supuesto, el CSS anterior supone que las etiquetas de anclaje se representan condisabled="disabled"
