-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));

一种解决方案是使用函数表达式：

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

据我所知，您将相同的功能绑定到两个不同的按钮单击事件。您对同一功能有两种不同的定义。一个很可能被覆盖在另一个之上，因此两个按钮都将调用 fl_MouseClickHandler，后者将以相同的时间戳调用 gotoAndPlay。

Quick fix could be just to change the name of 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));

Also, you should watch how you use "this" as you may not be scoped to what you think.

于 2017-01-05T21:33:33.617 回答