JS li 标签 onclick 在 IE8 上不起作用

Posted 2023-03-06

【中文标题】JS li 标签 onclick 在 IE8 上不起作用

【英文标题】：JS li tag onclick not working on IE8

【发布时间】：2014-07-11 01:06:57

【问题描述】：

我正在使用Below 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);
    
);

请推荐

【问题讨论】：

你看过了吗：***.com/questions/9769868/…？

你的代码根本不兼容IE8，IE8不支持getElementsByClassName、addEventListener等。你可以在MDN上查找所有的原生javascript函数，看看它们支持哪些浏览器.

@adeneo 感谢您的回复，我为 li onclik 尝试了不同的代码，但这是我得到的最好的。请建议是否有其他 JS 用于 li onclick ：它应该照顾跨度，锚标记和浏览器兼容性。

【参考方案1】：

IE8 及更早版本没有addEventListener，但它们确实有其非标准的前身attachEvent。它们完全不一样。

这是一个使用可用内容的“挂钩此事件”功能：

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 的浏览器上的事件对象上提供缺少的preventDefault 和stopPropagation 函数，并确保处理程序调用中的this 与使用addEventListener 时的情况相同。

上面不做的事件规范化的各个方面：

它不保证处理程序的运行顺序（attachEvent 以与 addEventListener 相反的顺序执行它们）

它不处理 e.which 与 e.keyCode 等方面的问题

...当然，我还没有提供 detach 事件函数。 :-) 对于这样的事情，请考虑使用像 jQuery、YUI、Closure 或 any of several others 这样的库。

---

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

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

到

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

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

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

【讨论】：

@Neo - 我喜欢称它为in兼容模式。 ;-) 当然，我不明白为什么不，它会查看定义的内容和（在）兼容模式下，IE11 会自行运行并且没有定义 addEventListener...