1

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 显示为“未定义”，而是显示为一个数字）。

为了让您快速测试它，我将上面的工作测试也放在这里。

这可以在Firefox 3.6 和 Safari 4.0.4上重现。

一切都只能在 IE7+ 上正常工作。

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

供参考：

  1. 如果你用 z() 替换 x() 一切都可以在所有浏览器中完美运行（这对我来说更疯狂）
  2. 在 src 属性中添加真实图像并不能解决问题
  3. 删除 img 中的样式并不能解决问题（我为图像提供样式只是为了帮助您单击图像，因此您可以看到 imnage 边框）
4

4 回答 4

6

您的问题在于变量范围，而不是保留“x”。图像对象具有名为“x”的属性。您可以使用 Chrome 的开发者工具看到这一点。当你调用“alert(x);”时 在图像对象上，范围内的“x”是图像上的“x”属性。

于 2010-03-22T19:27:26.077 回答
2

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

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

这个函数的作用域链与元素、元素的FORM（如果它存在并且是一个FORM元素）和document它本身一起增加。

它在代码中看起来像这样：

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

由于范围链的增加，这种行为可能会导致各种名称冲突，您无法 100% 确定您所指的内容，它可能是元素本身的属性、元素形式的属性、document对象的属性或任何全局变量。

推荐文章：

于 2010-03-22T20:46:38.863 回答
1

我似乎找不到任何文档来支持这一点，但我的猜测是该<img>标签正在被特殊处理，并且该对象实际上是一个 JavaScriptImage对象，而不是普通的 DOM 元素。该Image对象具有一个x属性，因此您对的无范围引用x意味着Image.x。如果您想要全局x属性，请window.x改用。

于 2010-03-22T19:29:10.723 回答
0

一些浏览器仍然支持，在 dom 规范之前，图像、a 元素和区域元素都只读取页面坐标的 x 和 y 属性。

于 2010-03-22T20:40:17.783 回答