1

これが私が単純なコードだと思ったものです：

<html>
    <head>
        <script>

            function Foobar(id) {

                self = this;

                self.id = id;
                self.canvas = document.createElement('canvas');
                self.canvas.style.border = '1px solid black';
                document.body.appendChild(self.canvas);
                self.canvas.addEventListener('mousedown', self.onMouseDown, true);

                self.onMouseDown = function(e) {
                    console.log(self.id);
                }

            }            

            var s1, s2;

            function onLoad() {
                s1 = new Foobar(1);
                s2 = new Foobar(2);
            }

        </script>
    </head>
    <body onload='onLoad()'>
    </body>
</html>

コンソールに ID 番号が表示されないのはなぜですか?

ここにフィドルがあります：http://jsfiddle.net/VRn7v/

4

3 に答える 3

3

selfイベントリスナーをバインドする前に、メソッドを割り当てる必要があります

修繕

http://jsfiddle.net/landau/VRn7v/3/

于 2012-08-03T19:52:39.683 に答える
2

selfはwindowオブジェクトのプロパティであり、通常は不適切な変数名です。また、キーワードselfが欠落しているため、変数は暗黙のグローバルです。var最後に、宣言する前にイベント ハンドラーをバインドしています。

function Foobar(id) {
    var that = this; // pick a better name, and use "var"
    that.id = id;
    that.canvas = document.createElement('canvas');
    that.canvas.style.border = '1px solid black';
    document.body.appendChild(that.canvas);

    that.onMouseDown = function(e) {
        console.log(self.id);
    }; // missing semicolon

    // bind the handler after declaring it
    that.canvas.addEventListener('mousedown', that.onMouseDown, true);
}
于 2012-08-03T19:54:36.643 に答える
1 
self.canvas.addEventListener('mousedown', self.onMouseDown, true);

この行でself.onMouseDownは isundefinedです。後でのみ割り当てるためです。それを機能させるための可能なクイックフィックス：

  • 関数の作成/割り当てを使用法の上に移動します
  • onMouseDown関数をプロトタイプに移動します (悪い、selfスコープにローカルがない)
  • を使用しませんself.onMouseDownがself.canvas.onmousedown(従来のイベント登録ではクロスブラウザセーフ)

また、self変数はグローバルです。動作中のハンドラー アタッチメントを使用すると、両方のクリックがログに記録されます"2"。また、self変数を使用するほとんどの場所では変数は必要ありません。変数が必要なのはイベント ハンドラーだけです。

修正されたフィドル: http://jsfiddle.net/VRn7v/2/

于 2012-08-03T19:51:35.720 に答える