2

私が取り組んでいるプロジェクトで内部使用のための小さなライブラリを書いています。私はアマチュア Javascript 開発者です。

小さなhtmlファイルとその下のjavascriptを書きました。

<html>
 <head>
  <script>
    var prc = {
      cng : function(evt){
           console.log(evt);
      }
    }
  </script>
 </head>
 <body>
   <input type='text' id='prc' onkeydown="prc.cng(window.event)"/>
 <body>
</html>

これをIEではなく、FirefoxとChromeで実行してみたところ、

Firefox で試しているときにこのエラーが発生"TypeError: prc.cng is not a function"し、Chrome で試しているときに"Uncaught TypeError: Object #<HTMLInputElement> has no method 'cng'".

StackOverflow でこれを検索してみましたが、彼らが直面している問題は私が直面しているものとはかなり異なります。直面した問題のほとんどは jQuery に関連していました。ここでは、私はどのような種類のライブラリも使用しておらず、プレーンな古い Javascript で書いていることに注意してください。

問題に対する私の理解を深めるために、どんな助けもいただければ幸いです。

4

2 に答える 2

2

id既存の JS 変数と同じを持つ要素を持つことは、変数の内容をブラッティングし、それを要素への参照に置き換えることです。

簡単な解決策は、変数名または要素 ID を変更することです。

より堅牢なソリューションは、すべてのデータをできるだけ狭い範囲に保持することです。どうしてもグローバルにする必要がない場合は、グローバルにしないでください。スクリプトの外部から上書きできなくなります。

組み込みのイベント属性を使用すると、要素内の変数がグローバルである場合にのみ参照できるため<script>、これはそれらの使用をやめて最新のものに移行する良い機会でもあります。

// Self-executing anonymous function expression used to limit scope
(function () { 

    // Locally scoped prc that won't clash with the element
    var prc = {
      cng : function(evt){
           console.log(evt);
      }
    }

    // Event handler binding
    document.getElementById('prc').addEventListener('keydown', function (evt) {
        prc.cng(evt)
    });

}());

このスクリプトは、イベント ハンドラーを見つけようとする試みが発生したときに入力が存在するように、入力の後に配置するまで実行を遅らせloadないことに注意してください。domReady

于 2013-05-16T08:20:52.273 に答える
0

問題を理解するのに尽力してくれた@Barmarのおかげで、私は自分の質問に対する答えを見つけました。

このようにhtmlで要素を定義すると

<input type='text' id='test' onkeydown='test.fn()'/>

これは、ブラウザによって同じオブジェクトが作成されることを意味します。そのため、id と競合する JavaScript を記述した場合、そのページのどこからでもアクセスできなくなります。

<script>
  var test = {
    fn : function(){
       console.log('test');
     }
  }
</script>

したがって、ID の名前を変更するか、オブジェクトの名前を変更するのが理想的です。

于 2013-05-16T08:22:21.553 に答える