1

Web アプリケーションの 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. x() を z() に置き換えると、すべてのブラウザーですべてが完全に機能します (これは私にとってさらにクレイジーです)
  2. src 属性に実際の画像を追加しても問題は解決しません
  3. img のスタイルを削除しても問題は解決しません (画像をクリックするのを助けるためだけに画像にスタイルを与えたので、画像の境界線を見ることができます)
4

4 に答える 4

6

あなたの問題は変数のスコープにあり、「x」が予約されているわけではありません。画像オブジェクトには「x」という名前のプロパティがあります。これは、Chrome の開発者ツールで確認できます。「alert(x);」を呼び出すと 画像オブジェクトでは、スコープ内の「x」は画像の「x」プロパティです。

于 2010-03-22T19:27:26.077 に答える
2

DavidとDanielからの回答を完成させるために、この動作はまったく文書化されていませんが、ほとんどすべての最新のブラウザーで次のように機能します。

インライン イベント ハンドラーのコンテンツはFunctionBody、ブラウザーがそのイベントを発生させたときに呼び出す関数の になります。

この関数のスコープ チェーンは、要素、要素(存在し、要素である場合)、およびそれ自体で拡張されます。FORMFORMdocument

コードでは次のようになります。

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 仕様以前は、images、a 要素、area 要素はすべて、ページ上の座標の x および y プロパティのみを読み取っていました。

于 2010-03-22T20:40:17.783 に答える