JS li tag onclick não está funcionando no IE8

Estou usando Abaixo JS, mas li onclick não está funcionando no navegador IE8.

binding jsfiddle:

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 sugira

IE8 e anteriores não têm addEventListener , mas eles têm seu predecessor não padrão, attachEvent . Eles não são exatamente os mesmos.

Aqui está uma function “hook this event” que usa o que está disponível:

 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."; })(); 

Então você usaria assim no seu exemplo:

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

Observe como ele fornece as funções preventDefault e stopPropagation no object de evento em navegadores usando attachEvent e garante que this dentro da chamada do manipulador seja o que seria se você estivesse usando addEventListener .

Existem vários aspectos da normalização de events que o acima não faz:

  1. Ele não garante a ordem em que os manipuladores serão executados ( attachEvent faz na ordem oposta para addEventListener )

  2. Ele não lida com problemas em torno de e.which versus e.keyCode e tais

… e, claro, não forneci uma function de evento de destaque . 🙂 Para coisas assim, olhe para usar uma biblioteca como jQuery , YUI , Closure ou qualquer um dos vários outros .


Nota: Como adeneo apontou em um comentário sobre a questão, o IE8 também não suporta getElementsByClassName . Mas ele suporta querySelectorAll e querySelector , portanto, altere:

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

para

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

Observe que isso tentará obter o segundo elemento correspondente ao seletor. [1] é a segunda input na lista, não a primeira, que seria [0] . Se você quis dizer o primeiro, você pode usar o querySelector , que retorna apenas a primeira correspondência:

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