JS li tag onclick no funciona en IE8

Estoy utilizando Below JS, pero li onclick no funciona en el navegador IE8.

jsfiddle link:

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

HTML

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 versiones anteriores no tienen addEventListener , pero sí tienen su predecesor no estándar, attachEvent . No son lo mismo.

Aquí hay una función de “conectar 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) { // ... }); 

Observe cómo proporciona las funciones stopPropagation y stopPropagation que stopPropagation en el objeto de evento en navegadores que usan attachEvent y asegura que this dentro de la llamada del manejador es lo que sería si estuviera usando addEventListener .

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

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

  2. No maneja problemas alrededor de e.which vs. e.keyCode y tal

… y, por supuesto, no he proporcionado una función de evento de separación. 🙂 Para cosas como esas, consulte el uso de una biblioteca como jQuery , YUI , Closure o cualquiera de varias otras .


Nota al margen : como adeneo señaló en un comentario sobre la pregunta, IE8 tampoco es compatible con getElementsByClassName . Pero admite querySelectorAll y querySelector , así que cambie:

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

a

 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 querySelector al primero, puedes usar querySelector , que solo devuelve la primera coincidencia:

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