CreateJS Animate CC - mouse clicks don't work

Question

What could be the reason for CreateJS mouse clicks not working at all?

Editing to clarify:

What could be the potential reasons for Animate-CC/CreatJS Canvas mouse interactions to work here (press the video play button ) but not here (press the button "play")?

Some type of "blocking", preventing the Canvas for getting the click?

Clarifying more:

Please open the console, you will see the first site logging both the canvas and the stage clicks, while the second one logs only the canvas clicks.

This is the code I have:

this.stage.addEventListener("click", function(){console.log("stage is clicked")});

this.stage.canvas.addEventListener("click", function(){console.log("canvas is clicked")});

My code is loaded into both of the above pages, but the second page does something that makes the stage unclickable.

Any ideas?

Thanks in advance!

Update 1:

Please see that the working example above is having my creative (id "iRoll") wrapped inside an iFrame, while the not-working example is not. That probably affects the way DOM mouse interactions are interpreted by the CreateJS framework.

Also, I have added to the above examples this code:

that.mcBTN.addEventListener("rollover", function (e) {
    that.mcBTN.gotoAndStop(1);
});

that.mcBTN.addEventListener("rollout", function (e) {
    that.mcBTN.gotoAndStop(0);
});

that.mcBTN being the black box, and i have the text "(rolled on)" on frame 1.

This is the code that changes the colored box on clicks:

that.first = true;
that.mcBTN.addEventListener("click", function (e) {
    that.mcChanger.gotoAndStop(that.first);
    that.first = !that.first;
});

If you alternate-click inside the black box and outside of it, you can see that some things are registered correctly in terms of coordinates system - (the "rolled on" text appears as it should), but still the click function and rollover function themselves somehow do not work (i.e, the colored box doesn't change color and the "rolled on" text doesn't appear based on rollover interaction.

Stage scaling can cause this. Adobe added "responsive" scaling to the stage which transforms coordinates. See if the click is triggered from somewhere else in the stage. — Lanny
thanx Lanny, I actually simplified the question further (see above edits). On the problematic page - no stage clicks are captured at all. Any thought on this? — Saariko

Lanny Lanny · Accepted Answer · 2017-04-23T22:51:46

Based on your latest code sample, I am guessing the second one (listener on the canvas) works, but the one on the stage doesn't. It is important to know that a stage "click" event only fires when there is content under the mouse. If you want a "click anywhere" event, then use "stagemouseup"

http://createjs.com/docs/easeljs/classes/Stage.html#event_stagemouseup

If you do have content under the mouse, and there is no console log when it is clicked, you might try looking at the stage scale. As I mentioned in my comment, Adobe added some responsive code that scales the contents to fit, but stage scaling notoriously causes mouse coordinate issues.

Any chance you can post an example or more code?

CreateJS Animate CC - mouse clicks don't work

1 Answers