La etiqueta JS li onclick no funciona en IE8

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

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