html - w3schools - Alternativa de propiedad de css ''pointer-events'' para IE

pointer events css w3schools

Question

Tengo un menú de navegación desplegable 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) mientras que otros deben navegar (estos no tienen menú desplegable y navegan directamente). Sin embargo, ambos tipos tienen href definido para ellos

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

pointer-events: none;

y está funcionando bien. Pero dado que esta propiedad no es compatible con IE, estoy buscando algo de solución. Lo molesto es que no tengo acceso ni privilegio para cambiar el código HTML y JavaScript por completo.

¿Algunas ideas?

Answer 1

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'' esconde 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;

});

Answer 2

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

• Pointer Events Polyfill .

Answer 3

Cubra los elementos ofensivos con un bloque invisible, usando un pseudo elemento :before o :after

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

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

Answer 4

Enfrenté problemas similares:

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

2. La corrección anterior no funcionaba 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 cursor: predeterminado

Answer 5

Hay 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 los eventos de puntero: ¿ninguno?

Answer 6

He encontrado otra solución para resolver este problema. Yo uso jQuery para establecer el href -attribute a javascript:; (no '''', o el navegador volverá a cargar la página) si el ancho de la ventana del navegador es mayor que 1''000 px. 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 es útil para ti.

Answer 7

Mejor solución:

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

Funciona perfectamente en todos los navegadores

Answer 8

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

Esto usa javascript y jquery.

(GitHub) pointer_events_polyfill

Esto podría usar un complemento de JavaScript para descargar / copiar. Simplemente copie / descargue los códigos de ese sitio y guárdelo como pointer_events_polyfill.js . Incluye ese javascript en tu 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 los elementos debajo del elemento transparente. Estoy usando IE 10. Espero que esto también funcione en IE 9 y siguientes.

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.

Answer 9

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

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

Reenviar eventos de mouse a través de capas

Esto utiliza un complemento que utiliza algunas propiedades de Javascript no conocidas para tomar el evento del mouse y enviarlo a otro elemento.

También hay otra solución de Javascript here .

Actualización para octubre de 2013 : aparentemente viene a IE en v11. Source Gracias Tim

Answer 10

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

Answer 11

Use OnClientClick = "return false;"

Answer 12

Vale la pena mencionar que específicamente para IE, disabled=disabled funciona para las etiquetas de anclaje:

<a href="contact.html" onclick="unleashTheDragon();" disabled="disabled">Contact</a>

IE trata esto como un elemento disabled y no activa el evento de clic. Sin embargo, disabled no es un atributo válido en una etiqueta de anclaje. Por lo tanto, esto no funcionará en otros navegadores. Para ellos pointer-events:none se requiere pointer-events:none en el diseño.

ACTUALIZACIÓN 1 : Entonces, 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 con disabled=''disabled'' , por lo que aún se verán activos. Por lo tanto, la regla y el estilo a a:hover{} 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, por encima de CSS se supone que las etiquetas de anclaje se representan con disabled="disabled"