Hey all
I have a rather complex question for the more experienced and knowledgeable people of how the Animate-CC/CreateJS/EaselJS engine works "under the hood", especially how the engine translates DOM mouse interactions to CreateJS interactions.
Please see a demo I developed HERE.
Press the play button on the video, and you will see a clickable creative box appearing on top of the video.
Also note, through the Console, that clicking the box loges two events:
stage is clicked
canvas is clicked
Meaning, both DOM and CreateJS listeners are triggering. Code is:
this.stage.addEventListener("click", function(){console.log("stage is clicked")});
this.stage.canvas.addEventListener("click", function(){console.log("canvas is clicked")});
Now please see THIS. - (Please check on Chrome only).
Click the >Play button.
On Chrome you will see the box, but won't be able to click. The Console shows that only the Canvas is reporting a click.
Note that there are no errors in the Console.
In both pages, the Animate-CC/CreateJS code is the same.
Now, granted, I have done a LOT of changes to the way the generated files are structured, and my code is loaded into these 2 different pages, which are structured differently - most noticeable, the first page is "hosting" the Canvas inside an iFrame, while the second doesn't.
I know this is a long-shot, and this having the creative clickable?
Bad CSS? CORS issues?
Anything else I should look into?
Thanks a lot in advance
AdChoices