动画HTML5画布 - 事件监听器不止一次触发?

时间:2017-03-08 20:42:57

标签: javascript jquery html5 canvas

所以我对javascript(以及一般的编码)非常陌生,而且我已经设法在Animate CC中制作了一个令人难以置信的基本HTML5画布。唯一的问题是,当我回到前一帧时,按钮会重复。

流程:

  1. 第1帧 - 控制台消息按钮&下一帧按钮
  2. 第2帧 - 上一帧按钮
  3. 当回到上一帧时,按钮会触发两次(即控制台日志消息触发两次)。如果我重复这个过程并移动到下一帧并再次返回第三帧,它将触发三次。

    我已经注意到这篇文章:Why are my event listeners firing more than once?

    这与我的问题完全相同。但不幸的是,这个答案适用于as3,我不知道如何为javascript更改它。我一直在努力研究几天,但我真的不明白:(

    任何人都可以帮助我,或者你能指出我正确的方向来了解这一点吗?

    谢谢!

    CODE:

    第1帧:

    instance = this;
    instance.stop();
    instance.messageBTN.on("click", messageTest);
    function messageTest(){
        console.log("Button Pressed")
    
    }
    
    instance.nextBTN.addEventListener("click", nextFrame);
    function nextFrame(){
    instance.gotoAndStop(1);
    }
    

    第2帧:

    instance = this
    instance.backBTN.addEventListener("click", previousFrame);
    function previousFrame(){
        instance.gotoAndStop(0);
     }
    

    示例文件:https://wetransfer.com/downloads/0eb9e342cc093fff59645626b9e2fd1e20170308205102/3bafa6

3 个答案:

答案 0 :(得分:0)

制作变量:

var eventLisBool = false;

使用以下代码在侦听器中包围您的代码:

if (!eventLisBool) {
// code...
// and at the end of your listener code, include this:
eventLisBool = true;
}

答案 1 :(得分:0)

我设法解决了这个问题!

AS3帖子建议删除事件监听器,但我无法弄清楚JS等价物是什么,但现在我知道了!

instance.stop();
//MAKE SURE ALL BUTTONS ARE EVENT LISTENERS
instance.messageBTN.addEventListener("click", messageTest);
function messageTest(){
    console.log("Button Pressed");
}

instance.nextBTN.addEventListener("click", nextFrame);
function nextFrame(){
instance.gotoAndStop(1);
//ADD IN TO REMOVE THE EVENT LISTENER WHEN MOVING TO ANOTHER FRAME
instance.messageBTN.removeEventListener("click", messageTest);
}

答案 2 :(得分:0)

在HTML5画布中,没有Flash中的nextFrame()或PrevFrame()。您只需要创建一个变量并增加每次点击的次数即可:

this.stop()
var _this = this;
    var frame = new Number(0);

    _this.next_btn.on('click', function(){
    /*
    Can be used on the main timeline or on movie clip timelines.
    */
    frame++;
    _this.myMovieClip_mc.mySubMovie_mc.gotoAndStop(frame);

    });

    _this.prev_btn.on('click', function(){
    /*
    Can be used on the main timeline or on movie clip timelines.
    */
    frame--;
    _this.myMovieClip_mc.mySubMovie_mc.gotoAndStop(frame);

    });

但是您必须放置任何逻辑条件来控制您的变量或函数,否则它将减少/增加有限的帧数