0

だから、私は次のようなコードを持っています:

function Shape() {
  ...
  var canvas = document.getElementById('canvas');
  ...

  canvas.onmousedown = handleMouseDown;       

}

function handleMouseDown(e) {
  this.width // Doesn't refer to the shape
  // How do I get a reference to the shape here?
}

質問 - イベント ハンドラーで Shape への参照を取得するにはどうすればよいですか?

4

3 に答える 3

0 
function handleMouseDown(e) {
    console.log(e);
}

次に、オブジェクトの内部にあるものを Web ブラウザ コンソールで確認しeます。e.target特にオブジェクトの内部。

于 2013-01-14T12:03:56.770 に答える
0

参照したいイベント ハンドラー コード内

this.width // in function handleMouseDown(e)

この変数には何を含める必要があると思いますか。関数 Shape() のコンテキスト内の可変幅ですか? 例の中で定義していないので、推測です。とにかくそれは何のために良いでしょうか？

うまくいけば、キャンバス内のいくつかの形状を管理し、プログラムでそれらを参照したいと思うでしょう。そうであれば、この問題についてあなたができることを概説しようと思います。

mouseclick イベントから位置を取得する:キャンバス要素でのマウス クリックの座標を取得するにはどうすればよいですか?

次に、キャンバスに対するマウスの位置で、独自のコードを使用してさまざまな形状の長方形の領域を確認します。

プログラム内のすべての形状の x、y 位置と幅/高さを保持するすべての形状のオブジェクトを作成します。

マウスクリック イベント ハンドラー コードによって呼び出される関数をこの形状に追加するか、イベント ハンドラー コード内の形状の座標およびその他の関連プロパティを使用して変更を適用します。

于 2013-01-14T12:48:10.850 に答える
-1

[MDN]thisを使用して、関数内でShapeインスタンスにバインドできます。.bind 

canvas.onmousedown = handleMouseDown.bind(this);

または、ブラウザーが をサポートしていない場合は.bind、クロージャーを使用します。

var self = this;
canvas.onmousedown = function(event) {
    handleMouseDown.call(self, event);
};

しかし、これthisは DOM 要素をもう参照しないことも意味します。event.targetまたは経由でアクセスできますevent.currentTarget。

于 2013-01-14T12:06:55.117 に答える