Internet Explorer 11问题:addEventListener不起作用 [英] Internet Explorer 11 issues: addEventListener not working

问题描述

我试图在元素列表上添加鼠标向下的监听器事件.该代码适用于chrome，但不适用于IE

I am trying to add listener event for mouse down on a list of elements. The code works for chrome, but not for IE

document.getElementsByClassName('select2-result-selectable').forEach(function(item){
  item.addEventListener('mousedown', function(e) { console.log( "User clicked on 'foo.'" ); 
  e.preventDefault();}); 
})

这适用于chrome，但不适用于IE 11.

This works on chrome, but not on IE 11.

我也尝试了以下代码.

document.getElementsByClassName('select2-result-selectable').forEach(function(item){
    if (item.addEventListener){
        item.addEventListener('mousedown',function(e){ console.log(e); e.preventDefault(); 
        console.log( "User clicked on 'foo.'" );}) 
      } else if (item.attachEvent){
        item.attachEvent('mousedown',function(e){ console.log(e); e.preventDefault(); 
        console.log( "User clicked on 'foo.'" );})
      }
    })

但这又是徒劳的，它适用于chrome，但不适用于IE.有什么建议吗?

But this was again futile, it works for chrome, but not on IE. Any suggestions?

推荐答案

我怀疑您会发现问题不是 addEventListener ，尽管您的第二个代码块需要 onmousedown，而不仅仅是 attachEvent 调用中的 mousedown (Microsoft在事件名称上使用了"on"前缀).但是IE11仍然具有 addEventListener ，只有在IE11自身跳动时，它才会丢失(您可以通过在 X-UA-Compatible 标头中添加 X-UA-Compatible 标头来解决此问题> head ):

I suspect you'll find that it's not addEventListener that's the problem, although your second code block would have needed onmousedown rather than just mousedown in the attachEvent call (Microsoft used the "on" prefix on event names). But IE11 has addEventListener anyway, it would only be missing if IE11 were hobbling itself (which you can fix by adding the X-UA-Compatible header to your page in head):

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

...，并在必要时关闭Intranet网站的兼容性视图".

...and turning off "compatibility view" for Intranet sites if necessary.

但是，我认为问题在于您正在尝试在 HTMLCollection 上使用 forEach . getElementsByClassName 的返回值不是一个数组，它是一个 HTMLCollection .规范不需要 HTMLCollection 具有 forEach (Chrome将其添加为扩展名).为 NodeList (由 querySelectorAll 返回的类型)定义了 forEach ，但没有为 HTMLCollection 定义，并且这种添加是相对的全新，IE不支持.

But, I think the problem is that you're trying to use forEach on an HTMLCollection. The return value of getElementsByClassName isn't an array, it's an HTMLCollection. The spec doesn't require HTMLCollection to have forEach (Chrome adds it as an extension). forEach is defined for NodeList (the type returned by querySelectorAll), but not HTMLCollection, and that addition is relatively new and not supported in IE.

因此要使用 forEach ，您需要执行以下操作:

So to use forEach, you'd do:

Array.prototype.forEach.call(document.getElementsByClassName('select2-result-selectable', function(item) {
    // ...
});

或者，您也可以轻松地在 HTMLCollection 上填充 forEach ，如

Alternatively, you can polyfill forEach on HTMLCollection easily, though, as shown in my answer here. Here's a loop doing both NodeList (if necessary) and HTMLCollection (if necessary), and polyfilling forEach (if necessary) and (for browsers that have it) Symbol.iterator (IE11 doesn't, though, you may choose to leave that code off although it's harmless to leave it):

var ctors = [typeof NodeList !== "undefined" && NodeList, typeof HTMLCollection !== "undefined" && HTMLCollection];
for (var n = 0; n < ctors.length; ++n) {
    var ctor = ctors[n];
    if (ctor && ctor.prototype && !ctor.prototype.forEach) {
        // (Yes, there's really no need for `Object.defineProperty` when doing the `forEach`)
        ctor.prototype.forEach = Array.prototype.forEach;
        if (typeof Symbol !== "undefined" && Symbol.iterator && !ctor.prototype[Symbol.iterator]) {
            Object.defineProperty(ctor.prototype, Symbol.iterator, {
                value: Array.prototype[Symbol.itereator],
                writable: true,
                configurable: true
            });
        }
    }
}

然后可以在 HTMLCollection 上使用 forEach 使用原始代码.

Then your original code using forEach on HTMLCollection would work.

这篇关于Internet Explorer 11问题:addEventListener不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！