Question

这可能是我想要忽视的一些简单但我的google-fu并没有解决任何可以解释原因的事情。以下面的代码片段为例（暂时忽略嵌入式js通常被认为是不好的做法）：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> 
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>
    </title>
</head>
<body> 
    <form action="">
      <div>
        <input type="text" id="pattern" value="foobar">
        <input type="button" value="Alert" OnClick="alert(pattern.value);">
      </div>  
    </form>
</body> 
</html>

以上将在IE8和Firefox 3中打印警告信息'foobar'，但Chrome将打印'undefined'。将pattern更改为pattern_等其他内容会按预期为所有三个浏览器打印“foobar”。

pattern是一个保留字还是用于其中一个内置js库的名称？这不能在Chrome下运行的原因是什么？

Answer 1

因为内部提到的浏览器将DOM元素作为对象附加到全局命名空间（window）。因此，id="xyz"的对象也可以作为window.xyz或xyz来处理。我认为Chrome不会这样做。

同时检查my SO-question，尤其是选中的答案。

评论后

[编辑]：它确实与Chrome（webkit）相关，它可能与我找到的here有关。另请参阅quirksmode（在页面中搜索＆＃39;模式＆＃39;在HTML5中看起来pattern是input的属性，因此我可以想象会干扰ID同名）

Answer 2

不要使用全局变量来通过id访问DOM元素。为此目的有document.getElementById(...)，甚至更好 - 几乎所有js库/框架中的选择器函数（例如jQuery中的$('#yourid')，Prototype中的$('yourid')等）。它们保证您可以跨浏览器支持，而每个浏览器的全局变量可能会有所不同。

为什么Chrome上的id =“pattern”时，以下嵌入式“OnClick”无效？

2 个答案: