Question

我有以下代码，单击上述元素时不会发生“警告”。但是我使用的IE（版本10）似乎支持addEventListener，因为我检查了另一个简单的程序，它运行正常。

var iframe1 = document.getElementsByName('frStatus')[0];
var innerDoc = (iframe1.contentDocument) ? iframe1.contentDocument : iframe1.contentWindow.document;
innerDoc.getElementById('slow_jquery').innerHTML = slowjquerycount;
innerDoc.getElementById('slow_jquery').style.color="red";
console.log("doc"+document.getElementById("slow_jquery"));
innerDoc.getElementById('slow_jquery').addEventListener("click", function(){
       alert("event listener");
});

相应的html是

<span id="slow_jquery" style="cursor:pointer;color:green;">0</span>

执行上述代码时＆amp;单击该元素，不抛出任何错误，控制台上没有警告，并且不显示警报消息。代码有什么问题吗？任何帮助都会有很大用处。

提前致谢。

注意： - 已经尝试使用z-index来确保元素不会隐藏在另一个元素后面。 - 代码在Chrome中运行良好。 - 确保IE-10支持addEventListener。

Answer 1

尝试element.onclick=function，而不是注册'click'事件监听器。

Answer 2

您正在尝试将侦听器绑定到动态添加的元素。使用jQuery在.on()中很容易。在简单的JS中，它有点困难：你必须使用事件委托。

确保querySelector的参数是加载时存在的元素，并且不会动态添加！在这种情况下，我假设iframe1就是这样一个元素。

document.querySelector(iframe1).addEventListener("click", function(event) {
  if (event.target.id === "slow_jquery") {
    alert("event listener");
  }
});

另见answer：

CAVEATS！示例小提琴仅包含代码符合标准的浏览器（即IE9 +，几乎每一个其他人的版本）如果你需要支持旧的IE＆＃34; attachEvent，那么您还想提供自己的自定义包装器围绕适当的原生功能。（有很多好处关于此的讨论;我喜欢Nicholas Zakas的解决方案在他的书中提供了适用于Web开发人员的专业JavaScript。）

在IE中单击时，addEventListener不会触发

2 个答案: