javascript FF / Safari中的xa保留关键字不在IE中吗？

Question

Web应用程序的网页显示一个奇怪的错误。 我递归地删除了所有HTML / CSS / JS代码，并找到了下面的基本和简单代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title>test</title>

   <script type="text/javascript">
      var TestObj =
      {
         foo: function() {}
      }

      alert(x); //ok displays "undefined"
      var x = TestObj.foo;
      var z = TestObj.foo;
    </script>

</head><body>

   <p onclick='alert(x);'>Click shows function foo!</p>
   <img onclick='alert(x);' alt='CRAZY click displays a number in FF/Safari not function foo' src='' style='display: block; width: 100px; height: 100px; border: 1px solid #00ff00;'>
   <p onclick='alert(x);'>Click shows function foo!</p>

</body></html>

太疯狂了：单击P元素时，字符串“ function（）{}”会按预期显示。 但是， 当单击IMG元素时，它会显示一个数字，好像x函数以某种方式从内存中删除或实例化了 （它甚至不将x显示为“ undefined”，而是显示为数字）。

为了让您快速进行测试，我也在这里放置了工作测试。

可以在Firefox 3.6和Safari 4.0.4上复制。

一切都只能在IE7 +上正常运行 。

我真的很笨，我想知道x是否可能是JS Firefox / Safari中的保留关键字。 感谢任何可以提供帮助的人！

仅供参考：

1. 如果用z（）代替x（），那么所有浏览器都可以正常运行（这对我来说更疯狂）
2. 在src属性中添加实际图像不能解决问题
3. 删除img中的样式不能解决问题（我为图像提供样式只是为了帮助您单击图像，因此您可以看到图像边框）

Answer 1

您的问题是变量范围，而不是保留“ x”。 图像对象具有名为“ x”的属性。 您可以使用Chrome的开发者工具查看此内容。 当您调用“警报（x）;”时 在图像对象上，作用域中的“ x”是图像上的“ x”属性。

Answer 2

只是为了完成David和Daniel的回答，根本没有记录这种行为，但是几乎在每个现代浏览器中，它的行为都如下所示：

内联事件处理程序的内容成为浏览器在触发该事件时调用的函数的FunctionBody 。

该函数的作用域链与元素，元素的FORM （如果存在并且是FORM元素）一起进行扩展 ，并document自身。

在代码中看起来像这样：

function onclick(event) {
  with(document) {
    with(this.form) {
      with(this) {
        // inline event handler content...
      }
    }
  }
}

这种行为可能会导致各种名称冲突，这是因为您无法100％确定所引用的范围链，因此可能是元素本身的属性，元素形式的属性， document的属性对象或任何全局变量。

推荐文章：

• HTML表单控件的不安全名称

Answer 3

我似乎找不到任何文档来支持此操作，但是我的猜测是<img>标签受到了特殊对待，并且该对象实际上是JavaScript Image对象，而不是普通的DOM元素。 Image对象具有x属性，因此您对x的无范围引用意味着Image.x 。 如果要使用全局x属性，请改用window.x 。

Answer 4

在dom规范之前，某些浏览器仍然支持图像，元素和区域元素，它们在页面上的坐标都只具有x和y属性。