addEventListener的IE8回退破坏了现代浏览器的代码



根据本例中提供的解释,我在html中添加了以下代码,作为立即调用的函数表达式的一部分:

(function hideOverlayOnEsc(){
document.addEventListener('keydown', function(e){
if( e.keyCode == '27' ){
cmnOverlayV2.hideOverlay();
}
}, false);
// IE8 Fix
if(!document.addEventListener){ 
document.attachEvent("onkeydown", function(e){
if( e.keyCode == '27' ){
cmnOverlayV2.hideOverlay();
}
});
}
})();

当将事件侦听器应用于文档的这两个版本分别使用时,它们可以按预期工作。也就是说,如果IE8 fix被删除,那么代码在其他浏览器中可以正常工作。如果addEventListener代码块被删除,它在IE8中可以正常工作。然而,将这两个代码块都放在适当的位置目前以某种方式破坏了两个浏览器类别(ie8和非ie8)中至少一个的html

一些可供参考的附加信息:

之所以使用document对象,是因为应该在Escape中隐藏的实际html元素最初并没有加载到DOM中,而这是一种简单的方法。

此代码块作为内联<script>调用或外部.js文件的调用正常工作(当省略两个内部代码块之一时)。

这个代码块所在的html被注入到另一个html文档的DOM中。换句话说,我正在处理的只是动态添加的整个页面的一部分。正因为如此,当我说html被"破坏"时,实际发生的是我正在编辑的html不存在于父html文档的DOM中。

我曾考虑过设置条件注释来表示类似<!--[if IE8]>USE SCRIPT B<![endif]-->的内容,但这很困难,因为我无法访问父html的<head>部分。如果可能的话,我更愿意在hideOverlayOnEsc()函数中解决这个问题。

您复制错误。仔细看这个答案。你的代码必须是这样的:

(function hideOverlayOnEsc(){
// IE8 Fix
if(document.addEventListener){ 
document.addEventListener('keydown', function(e){
if( e.keyCode == '27' ){
cmnOverlayV2.hideOverlay();
}
}, false);
} else {
document.attachEvent("onkeydown", function(e){
if( e.keyCode == '27' ){
cmnOverlayV2.hideOverlay();
}
});
}
})();

最新更新