JS li标记onclick不工作在IE8上

正在使用下面的JS，但li onclick不工作在IE8浏览器。

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

请build议

Answer 1

IE8和更早版本没有addEventListener ，但是它们有非标准的前身attachEvent 。 他们不完全一样。

这是一个“挂钩这个事件”function，它使用了可用的function：

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

那么你会在你的例子中使用它：

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

请注意，它如何在浏览器上使用attachEvent提供对事件对象上缺less的preventDefault和stopPropagation函数，并确保在处理程序调用中的这一点与使用addEventListener 。

事件规范化有很多方面，上面没有提到：

1. 它不保证处理程序的运行顺序（ attachEvent按照与addEventListener相反的顺序执行）

2. 它不处理e.which和e.keyCode等问题

…当然，我还没有提供分离事件function。 :-)对于这样的事情，看看使用像jQuery ， YUI ， Closure或其他任何一个库。

---

附注：正如adeneo在对该问题的评论中指出的那样，IE8也不支持getElementsByClassName 。 但它确实支持querySelectorAll和querySelector ，所以更改：

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

至

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

请注意，这将尝试获取匹配select器的第二个元素。 [1]是列表中的第二项，而不是第一项，这将是[0] 。 如果你的意思是第一个，你可以使用querySelector ， querySelector返回第一个匹配项：

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