Alternativa de propiedad css 'pointer-events' para IE

Tengo un menú desplegable de navegación en el que parte del título no debe navegar a otra página cuando se hace clic (estos títulos abren un menú desplegable cuando se hace clic en él), mientras que otros deben navegar (estos no tienen menú desplegable y navegan directamente). los tipos les han hrefdefinido

Para resolver esto, agregué el siguiente CSS para el tipo anterior de títulos

pointer-events: none;

y está funcionando bien. Pero como esta propiedad no es compatible con IE, estoy buscando alguna solución. Lo molesto es que no tengo acceso ni privilegios para cambiar completamente el código HTML y JavaScript .

¿Algunas ideas?

Pointer-events es un hack de Mozilla y donde se ha implementado en los navegadores Webkit, no puede esperar verlo en los navegadores IE por otro millón de años.

Sin embargo, hay una solución que encontré:

Reenvío de eventos de mouse a través de capas

Esto usa un complemento que usa algunas propiedades no conocidas / entendidas de Javascript 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:

1. Capture el evento 'mousedown' para el elemento superior (el elemento que desea desactivar los eventos de puntero).
2. En el 'mousedown', oculta el elemento superior.
3. Use 'document.elementFromPoint ()' para obtener el elemento subyacente.
4. Mostrar el elemento superior.
5. 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;

});

Hay una solución alternativa para IE: use SVG en línea y establezca 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 las 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 estilo.

ACTUALIZACIÓN 1 : Por lo tanto, agregar la siguiente regla me parece una solución de navegador cruzado

ACTUALIZACIÓN 2 : Para una mayor compatibilidad, porque IE no formará estilos para las etiquetas de anclaje 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"

Aquí hay un pequeño script que implementa esta característica (inspirado en el artículo del blog Shea Frederick que Kyle menciona):

• Puntero Eventos Polyfill .

Cubra los elementos ofensivos con un bloque invisible, utilizando un pseudo elemento: :beforeo:after

a:before {
//IE No click hack by covering the element.
  display:block;
  position:absolute;
  height:100%;
  width:100%;
  content:' ';
}

Por lo tanto, su clic aterriza en el elemento padre. No es bueno, si se puede hacer clic en el padre, pero de lo contrario funciona bien.

Pasé casi dos días buscando la solución para este problema y finalmente lo encontré.

Esto usa javascript y jquery.

(GitHub) pointer_events_polyfill

Esto podría usar un complemento de JavaScript para ser descargado / copiado. Simplemente copie / descargue los códigos de ese sitio y guárdelos como pointer_events_polyfill.js. Incluya ese javascript en su sitio.

<script src="JS/pointer_events_polyfill.js></script>

Agregue estos scripts jquery a su sitio

$(document).ready(function(){
    PointerEventsPolyfill.initialize({});
});

Y no olvide incluir su complemento jquery.

¡Funciona! Puedo hacer clic en elementos debajo del elemento transparente. Estoy usando IE 10. Espero que esto también funcione en IE 9 y versiones inferiores.

EDITAR: El uso de esta solución no funciona cuando hace clic en los cuadros de texto debajo del elemento transparente. Para resolver este problema, uso el foco cuando el usuario hace clic en el cuadro de texto.

Javascript:

document.getElementById("theTextbox").focus();

JQuery:

$("#theTextbox").focus();

Esto le permite escribir el texto en el cuadro de texto.

He encontrado otra solución para resolver este problema. Utilizo jQuery para establecer el hrefatributo- javascript:;(no '', o el navegador volverá a cargar la página) si el ancho de la ventana del navegador es mayor que 1'000px. Necesita agregar una identificación a su enlace. Esto es lo que estoy haciendo:

// get current browser width
var width = $(window).width();
if (width >= 1001) {

    // refer link to nothing
    $("a#linkID").attr('href', 'javascript:;'); 
}

Quizás te sea útil.

Utilizar OnClientClick = "return false;"

También puede simplemente "no" agregar una URL dentro de la <a>etiqueta, también lo hago para los menús que están <a>controlados por etiquetas con menús desplegables. Si no hay un menú desplegable, agrego la URL, pero si hay menús desplegables con una <ul> <li>lista, simplemente la elimino.

Me enfrenté a problemas similares:

1. Enfrenté este problema en una directiva, lo arreglé agregando a como elemento principal y haciendo eventos de puntero: ninguno para eso

2. La solución anterior no funcionó para la etiqueta de selección, luego agregué el cursor: texto (que era lo que quería) y funcionó para mí

Si se necesita un cursor normal, puede agregar el cursor: predeterminado

Mejor solución:

.disabled{filter: alpha(opacity=50);opacity: 0.5;z-index: 1;pointer-events: none;}

Funciona perfectamente en todos los navegadores.