JS li tag onclick non funziona su IE8

Sto usando Below JS, ma li onclick non funziona sul browser IE8.

collegamento 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); } }); 

per favore suggerire

IE8 e precedenti non hanno addEventListener , ma hanno il suo predecessore non standard, attachEvent . Non sono esattamente la stessa cosa.

Ecco una funzione “aggancia questo evento” che utilizza ciò che è disponibile:

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

Quindi lo useresti in questo modo nel tuo esempio:

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

Si noti come fornisce le funzioni preventDefault e stopPropagation mancanti sull’object evento sui browser che utilizzano attachEvent e garantisce che this all’interno della chiamata del gestore sia quello che sarebbe se si stesse utilizzando addEventListener .

Ci sono vari aspetti della normalizzazione degli eventi che quanto sopra non fa:

  1. Non garantisce l’ordine in cui verranno eseguiti i gestori ( attachEvent li fa nell’ordine opposto a addEventListener )

  2. Non gestisce i problemi relativi a e.which rispetto a e.keyCode e così via

… e, naturalmente, non ho fornito una funzione di evento di scollegamento . 🙂 Per cose del genere, guarda usando una libreria come jQuery , YUI , Closure o una qualsiasi di molte altre .


Nota a margine : come indicato da adeneo in un commento sulla domanda, anche IE8 non supporta getElementsByClassName . Ma supporta querySelectorAll e querySelector , quindi cambia:

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

a

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

Si noti che cercherà di ottenere il secondo elemento corrispondente al selettore. [1] è la seconda voce nell’elenco, non la prima, che sarebbe [0] . Se intendevi il primo, puoi usare querySelector , che restituisce solo la prima corrispondenza:

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