Javascript 对象不支持属性或方法“addEventListener”

Object doesn't support property or method 'addEventListener'

提问by user7293417

I am receiving an error on IE 8-7 saying that Object doesn't support property or method 'addEventListener' when I used the code below. Does anyone know how I can make the code below compatible with IE8-7? thanks

我在 IE 8-7 上收到一个错误，说当我使用下面的代码时，对象不支持属性或方法“addEventListener”。有谁知道如何使下面的代码与 IE8-7 兼容？谢谢

 document.getElementById('clear').addEventListener('click', function () {
  ["A1","A2","A3","A4","A5","A6", "A1_flip", 

  ].forEach(function(id) {
    document.getElementById(id).checked = false;
  });
  return false;
}) 

回答by Rion Williams

Support for addEventListener()function isn't available in older versions of Internet Explorer (i.e. 7-8), so you won't be able to use it on the browsers you are attempting to target.

addEventListener()旧版本的 Internet Explorer（即 7-8）不支持函数，因此您将无法在您尝试定位的浏览器上使用它。

You could consider wiring this up using jQuery's on()function, assuming you are using a version of jQuery that is designed to target older browsers as it will generally have the necessary fallbacks to support it.

您可以考虑使用 jQuery 的on()函数将其连接起来，假设您使用的 jQuery 版本旨在针对较旧的浏览器，因为它通常具有必要的回退来支持它。

$('#clear').on('click', function () {
   var elements = ["A1","A2","A3","A4","A5","A6", "A1_flip"];
   elements.forEach(function(id) {
         $("#" + id).prop("checked", false);
   });
   return false;
}) 

回答by T.J. Crowder

That's because they don't support addEventListener. See this question's answersfor details.

那是因为他们不支持addEventListener. 有关详细信息，请参阅此问题的答案。

But since you've said you're using jQuery, you can...use jQuery to get around this issue:

但是既然你已经说过你在使用 jQuery，你可以……使用 jQuery 来解决这个问题：

$('#clear').on('click', function () {
  ["A1","A2","A3","A4","A5","A6", "A1_flip"
  ].forEach(function(id) {
    $("#" + id).prop("checked", false);
  });
  return false;
});

or actually, we can be a bit more direct:

或者实际上，我们可以更直接一点：

$('#clear').on('click', function () {
  $("#" + ["A1","A2","A3","A4","A5","A6", "A1_flip"].join(", #")).prop("checked", false);
  return false;
});

...which works by building a selector string from the array.

...它通过从数组构建一个选择器字符串来工作。

I just realized I'm assuming the array's contents vary. If they don't, if you literallyjust want those specific elements:

我刚刚意识到我假设数组的内容有所不同。如果他们不这样做，如果您真的只想要这些特定元素：

$('#clear').on('click', function () {
  $("#A1, #A2, #A3, #A4, #A5, #A6, #A1_flip").prop("checked", false);
  return false;
});

...or better yet, give them a common classand use

...或者更好的是，给他们一个共同的class和用途

$('#clear').on('click', function () {
  $(".the-class").prop("checked", false);
  return false;
});

---

---

If you don'tuse jQuery and just mis-tagged it, see the linked question above. One of the answers there is mine, providing a hookEventfunction that deals with cross-browser event handling:

如果您不使用 jQuery 并且只是错误标记了它，请参阅上面的链接问题。我的答案之一是，提供了一个hookEvent处理跨浏览器事件处理的函数：

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:

然后：

hookEvent(document.getElementById('clear'), 'click', function(e) {
  ["A1","A2","A3","A4","A5","A6", "A1_flip"
  ].forEach(function(id) {
    document.getElementById(id).prop("checked", false);
  });
  e.preventDefault();
});

回答by Circle Hsiao

If you want a better compatibility to obsolete browsers plus not really all new features of jQuery are needed. You might consider just switch to jQuery 1.1X(currently 1.12). It will save you lots of time from handling compatible issues.

如果你想更好地兼容过时的浏览器，而且并不是真正需要 jQuery 的所有新功能。您可能会考虑切换到 jQuery 1.1X（当前为 1.12）。它将为您节省大量处理兼容问题的时间。

ref: jQuery - Browser support

参考：jQuery - 浏览器支持