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

Question

当我使用下面的代码时，我在 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;
})

原文由 user7293417 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

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

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

…通过从数组构建选择器字符串来工作。

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

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

…或者更好的是，给他们一个共同的 class 并使用

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

---

如果您 不 使用 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.";
})();

然后：

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

原文由 T.J. Crowder 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

您可以考虑使用 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;
})

原文由 Rion Williams 发布，翻译遵循 CC BY-SA 3.0 许可协议