-2

HTML5 キャンバスのアニメーションのタイムラインを制御する必要があります。すべてのボタンを作成し、すべてのコードを編集しました。奇妙なことに、すべてのボタンが同じ機能を実行します。

this.stop()
//---------------------------------------------------------//
this.letterA.addEventListener("click", fl_MouseClickHandler.bind(this));

function fl_MouseClickHandler()
{
    this.gotoAndPlay(32);
}

//---------------------------------------------------------//

//---------------------------------------------------------//
this.letterB.addEventListener("click", fl_MouseClickHandler.bind(this));
}
function fl_MouseClickHandler()
{
    this.gotoAndPlay(212);
}
4

2 に答える 2

1

関数巻き上げについて読んでください。関数ステートメントはスコープの一番上に引き上げられるため、コードは次のようになります

function fl_MouseClickHandler() {
    this.gotoAndPlay(32);
}

function fl_MouseClickHandler() {
    this.gotoAndPlay(212);
}

...
this.stop()    
this.letterA.addEventListener("click", fl_MouseClickHandler.bind(this));
this.letterB.addEventListener("click", fl_MouseClickHandler.bind(this));

1 つの解決策は、関数式を使用することです。

var that = this;
this.letterA.addEventListener("click", function () { that.gotoAndPlay(32); });

または、使用を主張する場合bind

this.letterA.addEventListener("click", (function () { this.gotoAndPlay(32); }).bind(this));
于 2017-01-05T21:27:33.480 に答える
0

私が知る限り、同じ関数を 2 つの異なるボタンクリック イベントにバインドしています。この同じ関数の 2 つの異なる定義があります。一方が他方の上に書き込まれている可能性が高いため、両方のボタンが fl_MouseClickHandler を呼び出し、同じタイムスタンプで gotoAndPlay を呼び出します。

fl_MouseClickHandler の名前を変更するだけで簡単に修正できます。

function fl_MouseClickHandlerA() {
    this.gotoAndPlay(32);
}

function fl_MouseClickHandlerB() {
    this.gotoAndPlay(212);
}

this.letterA.addEventListener("click", fl_MouseClickHandlerA.bind(this));
this.letterB.addEventListener("click", fl_MouseClickHandlerB.bind(this));

また、自分の考えに限定されない可能性があるため、「これ」の使用方法に注意する必要があります。

于 2017-01-05T21:33:33.617 に答える