Apparent Global play(); override

[BioME]

I'm experimenting with HTML canvas for the first time today.  I want to compose self-contained excerpts of my larger animated lessons.  To define my current difficulty I need to provide a brief description of how these lessons are formated.  They are stop action progressions through the timeline.  The playback progresses until it reaches a specified keyframe, where it stops.  I refer to these specified keyframes as freezeFrames.  After the playback stops at a freezeFrame, the user clicks the stage to get it to resume and progress to the next freezeFrame.  Moreover, there is a back button at each freezeFrame.  If the user clicks the back button the playback goes to the previous freezeFrame and stops there.  Now I've found the code to do most of this (listed below), with one problem.

1.) Stops playback at a freezeFrame, written into a keyframe at the freezeFrame.

this.stop();

2.) Resumes playback when the stage is clicked, written into the first keyframe of the timeline.  

var _this = this;
_this.stage.on("click", function(){
_this.play();
});

3.) Back buttons, written into a keyframe where the button first appears.

var _this = this;
_this.buttonLabel.on('click', function(){
_this.gotoAndStop("frameLable");
});

Now I can explain my problem.  When I click a back button it doesn't obey the stop commands.  It goes to the previous freezeFrame, but it doesn’t stop there.  Instead, it plays back to the current freezeFrame.

To test the problem, I deleted code 2.) above.  This eliminated the problem in that the playback would goto the previous freezeFrame and stop there as it's supposed to.  Of course this doesn't allow the user to resume playback by clicking the stage.  My interpretation is that the stage onClick play commands are overriding the stop commands.  

I also tried writing the stage onClick play code into the global script instead of the first keyframe of the timeline, but it simply didn't work.  The playback wouldn’t resume when the stage was clicked.

If someone could help this poor novice I would really appreciate it.  How do I get a back button to send the playback to the previous freezeFrame and stop there, while still resuming playback when the stage is clicked?

[ClayUUID]

Just humor me here... try putting an alert() statement in your stage click function.

[BioME]

Thanks for the tip ClayUUID.  I really appreciate all the help you and the rest of the community provide.  However, I need a little more guidance.  Remember that I'm a novice to HTML canvas.  How do I put an alert statement in my stage click function.  I tried replacing     _this.play();     with    alert(_this.play(););   but no surprise it didn't work.  

[ClayUUID]

I... no, I didn't say put your play() statement inside an alert() statement. I said add an alert() statement. You know, in addition to the code that's already inside the click handler function. alert("hello!"); or alert("I like muffins"); or whatever, it doesn't matter, as long as something pops up when that function executes.

[BioME]

OK, now I have an idea what alert does.  I put the command in as shown below.

var _this = this;
_this.stage.on("click", function(){
_this.play();
alert("Click to Play");
});

Now, every time I click anything, whether it's the stage or a button, a white window pops up with the text Click to Play, and an OK button.  After I click the OK, the command executes.  Does that tell us something?

[ClayUUID]

Well, do you think it might mean that when you click your "Back" button, it's activating both your back button click handler, AND your stage click handler? And if that's the case, can you see why playback is resuming when you go back?

[BioME]

Yes I do believe that's what's happening and I can see why that would cause the playback to resume after it goes back.  The question is how can I prevent it.

[ClayUUID]

How about by NOT assiging a click listener to the entire freaking stage? Maybe just use a full-screen button that's only on the stage when you need it to be there? Doesn't that seem much more sensible?

[BioME]

Yes that would work, although it isn’t a very elegant solution.  However, I ran across the stopProgation() method so I gave that a try, and it worked.   Thanks for trying to help.

[ClayUUID]

It's a perfectly elegant solution to only have a click event listening when you actually need it. Stuffing a propagation stopper in another click event handler is an ugly hack.

This right here... this is how bad coders are born.

[BioME]

What this is, is a failure to communicate.  The problem with your suggestion is you're assuming there are frames where this click listener isn't needed; there aren't.  At every point throughout each lesson, whenever the stage is clicked, the lesson needs to play to the next freezeFrame.  This is why I opted for one gloabal handler at the beginning of the lesson.  Moreover, I am not writing separate click handlers for the progation stoppers.  I'm encorporating the stopProgation commands in the handlers for the back buttons.