JS li标签onclick不工作在IE8 [英] JS li tag onclick not working on IE8

问题描述

使用以下JS，但li onclick在IE8浏览器上无效。

Am using Below JS,but li onclick is not working on IE8 browser.

jsfiddle链接：

jsfiddle link :

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

请建议

推荐答案

IE8和更早版本没有 addEventListener ，但它们有非标准的前缀 attachEvent 。

IE8 and earlier don't have addEventListener, but they do have its non-standard predecessor, attachEvent. They're not quite the same.

这里有一个hook this event函数，使用可用的函数：

Here's a "hook this event" function that uses what's available:

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

然后你就可以像这样在你的例子中使用：

Then you'd use it like this in your example:

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

请注意它如何提供缺少的 preventDefault stopPropagation 在浏览器上的事件对象使用 attachEvent ，并确保 this 在处理程序调用中是如果你使用 addEventListener 。

Note how it provides the missing preventDefault and stopPropagation functions on the event object on browsers using attachEvent and ensures that this within the handler call is what it would be if you were using addEventListener.

1. 不能保证订单的正确性。 （ attachEvent 按照与 addEventListener 相反的顺序）

1. It doesn't guarantee the order in which the handlers will run (attachEvent does them in the opposite order to addEventListener)

它不处理 e.which 与 e.keyCode 和这样的

...当然，我还没有提供 >事件函数。 :-)对于这样的事情，看看使用像 jQuery ， YUI ，关闭，或其他几个人。

...and of course, I haven't provided a detach event function. :-) For things like that, look at using a library like jQuery, YUI, Closure, or any of several others.

注释：由于 adeneo 在对此问题的评论中指出，IE8也不支持 getElementsByClassName 。但它支持 querySelectorAll 和 querySelector ，因此更改：

Side note: As adeneo pointed out in a comment on the question, IE8 also doesn't support getElementsByClassName. But it does support querySelectorAll and querySelector, so change:

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

到

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

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

Note that that will try to get the second element matching the selector. [1] is the second entry in the list, not the first, which would be [0]. If you meant the first, you can use querySelector, which returns just the first match:

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

这篇关于JS li标签onclick不工作在IE8的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！