Question

我有一个看似简单的问题，我无法找到解决方案。给出以下代码：

<html>
    <head>
        <script type="text/javascript">
            document.onkeypress = function(ev) {
                if (!ev) { alert("Broken"); return; }
                var key = ev.charCode || ev.keyCode;
                alert(key);
            }
        </script>
    </head>
    <body>Test</body>
</html>

如果我将其保存为文件并将其加载到IE中并按下一个键，它总会出现“破碎”警报，而在Firefox中它可以正常工作（使用键码警告）。

如果我使用window.onkeypress而不是文档处理程序，则IE中根本不会调用它。如果我在onload事件中附加处理程序，它就没有任何区别。使用keydown或keyup等事件没有任何区别（在IE中仍然存在问题）。

然而，当我使用jsfiddle for the example时，它在IE中运行良好。

那么：jsfiddle与上面的代码有什么不同，我如何让它在IE中工作？

Answer 1

IE不会将事件对象传递给事件处理程序;相反，它可以在window.event中使用。在IE中，当使用addEventListener或attachEvent时，“this”在事件监听器中将引用窗口而不是事件来自的元素，并且已附加/添加。

        document.onkeypress = function(ev) {
            ev = window.event||ev;
            var key = ev.charCode || ev.keyCode;
            alert(key);
        }

Answer 2

在任何浏览器中包含DOCTYPE都很重要，但在IE中更是如此。如果省略一个，我相信它使用怪癖模式，这意味着坏事。您可以添加HTML5 doctype：

<!DOCTYPE html>

Doctypes应该是HTML文件中的第一个非空行。这意味着甚至评论不应该出现在doctype之前，并且可能导致IE使用怪癖模式。

这是关于标准模式和怪癖模式之间区别的一个很好的小读物：https://developer.mozilla.org/en-US/docs/Quirks_Mode_and_Standards_Mode

此外，作为一个注释，IE使用全局event变量进行事件，因此您应该检查它而不是认为它已被破坏。例如：

ev = ev || window.event;

可以替换您的if对帐单行。

Answer 3

jQuery也有助于解决这些跨浏览器问题，这里有jQuery：

$(document).keypress(function(e) {
      alert(e.keyCode);
});

FIDDLE HERE

如何正确附加到按键事件？

3 个答案: