Alternativa de propiedad css 'pointer-events' para IE


155

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?


2
¿Hay alguna manera de obtener acceso al HTML y los scripts? Intenta hablar con quien te haya asignado la tarea.
Kyle

@Kyle No es exactamente un problema de privilegios, hay algunas dificultades técnicas también para modificar el código html / javascript
anupam



3
Tenga en cuenta que pointer-eventsahora está en IE11 +
David Storey

Respuestas:


88

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.


44
La documentación de ie9 dice que es compatible con esta propiedad (sin embargo, aún no he probado ie9). De todos modos, ya tenía ideas en mi mente que se dan en los enlaces, pero como estaba buscando alguna solución específica de CSS no puedo usarlas. Voy a tratar de modificar el código html / js en lugar de pasar tiempo en esta problem.thanks mucho por su tiempo y ayuda
anupam

11
En el W3C, este tema fue objeto de debate debido al secuestro de clics . Regla general: tan pronto como el W3C publique la recomendación del candidato, el equipo de IE la implementará y siempre hay una lección de prisa que hace que se desperdicie . Además, Mozilla lo dijo todo " Advertencia: el uso de eventos de puntero en CSS para elementos que no son SVG es experimental. La característica solía ser parte de la especificación de borrador de CSS UI pero, debido a muchos problemas abiertos, se ha pospuesto a CSS4 . "
cuervo vulcano

8
Según caniuse.com, los eventos de puntero CSS están llegando a IE 11. caniuse.com/#feat=pointer-events
Tim

44
Esa no es una razón para rechazar una respuesta @eyurdakul
scumah

14
"you can't expect to see it in IE browsers for another million years."Tomó solo 3 años ...
ProblemsOfSumit

20

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;

});

2
Esto funcionó para mí. Prefiero pequeñas correcciones que puedo poner en mi código js en lugar de agregar muchos polyfills;)
dippas

Esta es una solución creativa, me gusta. El único problema es que esto agrega un procesamiento innecesario a los navegadores donde los eventos puntuales funcionan. Sería genial hacer que esto ejecute condicionalmente solo los navegadores IE.
Trevor

Estoy de acuerdo, es rápidamente implementable para un problema desconcertante, pero de hecho, en mi implementación, solo lo aplico si el navegador es IE, lo coloca dentro de esta verificación: if (navigator.appName == 'Microsoft Internet Explorer' ) {... la lógica va aquí ..}
MarzSocks

3
esto funciona muy bien! dado que supuestamente 11 comenzó a admitir eventos de puntero, simplemente lo envuelvo dentro de esta cláusula: if (navigator.userAgent.toLowerCase (). indexOf ('msie')> 0) ¡GRACIAS!
Hank


10

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"


1
Esto no funcionó para mí. En IE9-10, las funciones onclick todavía se ejecutan.
Ciertamente, el


4

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.


1
Usé una idea similar con el atributo deshabilitado. En IE, agregar el atributo deshabilitado evita los eventos de clic, pero si hay elementos secundarios, aún activarán el clic. cubrir a los niños para que no se pueda hacer clic es una gran solución para esto. Tuve que usar un color de fondo con opacidad 0 para que IE se registrara, allí había un elemento real.
Blake Plumb

4

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.


1

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.



0

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.


0

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


-1

Mejor solución:

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

Funciona perfectamente en todos los navegadores.


3
Excepto para la versión IE <11, donde no se admiten eventos de puntero. Creo que te perdiste el punto.
prison-mike
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.