在IE中单击addEventListener时不会触发

addEventListener doesnt fire on click in IE

本文关键字:addEventListener IE 单击      更新时间:2023-09-26

我有下面的代码和"alert"不发生在点击该元素。但是addEventListener似乎被我使用的IE(版本10)支持,因为我用另一个简单的程序检查过,它工作得很好。

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>

以上代码执行时&单击元素,不抛出错误,控制台上不显示警告,也不显示警告消息。代码有什么问题吗?任何帮助都将大有用处。

提前感谢。

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

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

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

确保querySelector的参数是加载时存在的元素,而不是动态添加的!在这种情况下,我假设iframe1是这样一个元素。

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

也看这个答案:

警告!示例Fiddle只包含用于兼容标准的浏览器(例如IE9+,以及几乎所有的浏览器)如果你需要支持"旧的IE"attachEvent,那么您还需要提供自己的自定义包装器围绕适当的本地函数。)有很多好处关于这个的讨论;我喜欢尼古拉斯·扎卡斯的解决方案)