La etiqueta JS li onclick no funciona en IE8

4 minutos de lectura

La etiqueta JS li onclick no funciona en IE8
Sudheera

Estoy usando debajo de JS, pero li onclick no funciona en el navegador IE8.

enlace jsfiddle:

http://jsfiddle.net/sudheera/DUZ3B/14/

HTML

<div class="primaryNav fl">
<ul id="hd_vertical" class="productNav">

<li id="hd_test" class="flight">
<span class="navIcon flightIcon hd_test">Test</span>
<a class="hd_test" href="http://validator.w3.org/">Flights</a>
</li>

<li id="hd_test1" class="bus">
<span class="navIcon busIcon hd_test1">Test</span>
<a class="hd_test1" href="http://www.w3schools.com/">Buses</a>
</li>

</ul>
</div>

JS

var changeLocation = function(id) {
  var _url = document.getElementsByClassName(id)[1].getAttribute('href');
  location.href = _url;   
}

document.getElementById("hd_vertical").addEventListener("click",function(e) {
        if(e.target.nodeName == "LI") { 
            var _anchor = e.target.id;
            changeLocation(_anchor);
        } else if(e.target.nodeName == "SPAN") {
            var span = e.target;
            var li = span.parentNode;
            var _anchor = li.id;   
            changeLocation(_anchor);
    }
});

Por favor recomiende

  • ¿Echó un vistazo a: stackoverflow.com/questions/9769868/…?

    – Awad Maharoof

    22 de mayo de 2014 a las 6:34


  • Su código no es compatible con IE8 en absoluto, IE8 no es compatible getElementsByClassName, addEventListener etc. Puede buscar todas las funciones javascript nativas en MDN y ver en qué navegadores son compatibles.

    – adeneo

    22 de mayo de 2014 a las 6:35

  • @adeneo gracias por su respuesta, probé un código diferente para li onclik, pero este es el mejor que obtuve. Sugiera si hay algún otro JS para li onclick: debería ocuparse del espacio interior, la etiqueta de anclaje y la compatibilidad del navegador.

    – Sudheera

    22 de mayo de 2014 a las 6:42

IE8 y anteriores no tienen addEventListenerpero tienen su predecesor no estándar, attachEvent. Ellos no están bastante lo mismo.

Aquí hay una función “enganchar este evento” que usa lo que está disponible:

var hookEvent = (function() {
    var div;

    // The function we use on standard-compliant browsers
    function standardHookEvent(element, eventName, handler) {
        element.addEventListener(eventName, handler, false);
        return element;
    }

    // The function we use on browsers with the previous Microsoft-specific mechanism
    function oldIEHookEvent(element, eventName, handler) {
        element.attachEvent("on" + eventName, function(e) {
            e = e || window.event;
            e.preventDefault = oldIEPreventDefault;
            e.stopPropagation = oldIEStopPropagation;
            handler.call(element, e);
        });
        return element;
    }

    // Polyfill for preventDefault on old IE
    function oldIEPreventDefault() {
        this.returnValue = false;
    }

    // Polyfill for stopPropagation on old IE
    function oldIEStopPropagation() {
        this.cancelBubble = true;
    }

    // Return the appropriate function; we don't rely on document.body
    // here just in case someone wants to use this within the head
    div = document.createElement('div');
    if (div.addEventListener) {
        div = undefined;
        return standardHookEvent;
    }
    if (div.attachEvent) {
        div = undefined;
        return oldIEHookEvent;
    }
    throw "Neither modern event mechanism (addEventListener nor attachEvent) is supported by this browser.";
})();

Entonces lo usarías así en tu ejemplo:

hookEvent(document.getElementById("hd_vertical"), "click", function(e) {
    // ...
});

Tenga en cuenta cómo proporciona la falta preventDefault y stopPropagation funciones en el objeto de evento en navegadores usando attachEvent y asegura que this dentro de la llamada del controlador es lo que sería si estuviera usando addEventListener.

Hay varios aspectos de la normalización de eventos que lo anterior no no hacer:

  1. No garantiza el orden en que se ejecutarán los controladores (attachEvent los hace en el orden contrario a addEventListener)

  2. No maneja problemas alrededor e.which contra e.keyCode y tal

… y por supuesto, no he proporcionado un despegar función de evento 🙂 Para cosas como esa, mira usar una biblioteca como jQuery, YUI, Cierreo cualquiera de varios otros.


Nota al margen: como señaló Adeneo en un comentario sobre la pregunta, IE8 tampoco es compatible getElementsByClassName. Pero lo hace apoyo querySelectorAll y querySelectorasí que cambia:

var _url = document.getElementsByClassName(id)[1].getAttribute('href');

para

var _url = document.querySelectorAll("." + id)[1].getAttribute('href');

Tenga en cuenta que eso intentará obtener el segundo elemento que coincida con el selector. [1] es la segunda entrada en la lista, no la primera, que sería [0]. Si te refieres a la primera, puedes usar querySelectorque devuelve solo la primera coincidencia:

var _url = document.querySelector("." + id).getAttribute('href');

  • @Neo: me gusta llamarlo enmodo de compatibilidad. 😉 Claro, no puedo ver por qué no, mira lo que está definido y en el modo de (in)compatibilidad, IE11 se cojea y no define addEventListener

    –TJ Crowder

    1 mayo 2020 a las 18:37

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad