オブジェクト指向プログラミングとonmousedown関数の問題

Question

私はhtml5キャンバスで描画アプリケーションを作っています。私はOOPを使用して、すべてのグローバル変数を回避しようとしています。私はPainLabクラスおよび描画クラス

var PaintLab = function() { 
    this.drawing = new Drawing(); 
    //Define some methods 
    var self = this; 
    canvas.addEventListener('click', MouseDown, self, false); 
}; 

var Drawing = function() { 
    this.position = { x: 4, y: 200 }; 
    this.size = { width: 500, height: 500 }; 
}; 

あなたは私がここにキャンバスをクリックすると、ユーザーのイベントリスナーを持って見ることができるように何のMouseDown機能であるがあります。

var MouseDown = function(paintLab, evt) { 
    var mouseX = evt.clientX; 
    var mouseY = evt.clientY; 
    //Check is user clicked the drawing which is a square element on the canvas 
    if (x >= paintLab.drawing.position.x && x <= paintLab.position.x + paintLab.drawing.size.width && 
    y >= paintLab.drawing.position.y && y <= paintLab.position.y + paintLab.drawing.size.height) { 
    //Draw to canvas  
    } 
}; 

このコードを使用すると、clientX/YとpaintLabはデニュアされません。ほとんどのPaintLab（）のスコープはこの情報を削除しますが、これを克服する最善の方法は何ですか？私は助けていただきありがとうございます！

Answer 1

イベントオブジェクトのみがMouseDown関数に渡されます。 https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

対象：それはoptionsオブジェクトことになって、そして4番目の引数のみのGecko/Mozillaのためである - 私はあなたがaddEventListenerに3番目の引数としてselfを渡すことによって起こるのだろう考えているかわからないんだけど.addEventListener（type、listener [、useCapture、wantsUntrusted]）;

canvas.addEventListener('click', MouseDown.bind(self)); 

を次に、MouseDownで、のthis：//のGecko/Mozillaはだけ

いずれの場合においても

、何を行うことができますことは、あなたの関数を実行するの下にコンテキストを設定するbind()を使用しています関数は、現在のインスタンスPaintLabを参照します。

---

しかし、あなたの構造を再考することをお勧めします。あなたがどこかでcanvasを宣言する必要があるかもしれません

var PaintLab = (function() { 
    var self = this; 
    canvas.addEventListener('click', self.MouseDown); 
    return { 
     MouseDown: function(evt) { 
      var mouseX = evt.clientX; 
      var mouseY = evt.clientY; 
      //Check is user clicked the drawing 
      if (mouseX >= self.drawing.position.x && mouseX <= self.position.x + self.drawing.size.width && 
       mouseY >= self.drawing.position.y && mouseY <= self.position.y + self.drawing.size.height) { 
       //Draw to canvas  
      } 
     } 
    } 
})(); 

あなただけbind()いじりの代わりにselfを参照することができますこの方法...

注：PaintLabオブジェクト、およびMouseDownイベントそのオブジェクトのメソッドを作成しますそこに、しかし、私はそれをあなたのための練習として残します:)。