Event listener on Stage is happening on top of Movieclip (and not on Stage)

[KeelyM]

I'm working on an HTML5 canvas document in Adobe Animate CC and writing the code in javascript. I have an event listener that seems to be firing off over my movieclips, but not over the stage - where I would like it to. I'm not a coder - so I apologize in advance.

The project contains several movie clips named yoke, cyclic, and controlboard (this one is more of a background image).

How I have it working now is when the cyclic movieclip is moved up and down with a pressmove function, the yoke movieclip will rotate. The code for that is: (I've got some stuff tabbed out since I'm reusing code from other projects)

var shape = this.yoke;
var stick = this.cyclic;
var mouseMove = function () {
var rads = Math.atan2(stage.mouseY - shape.y, stick.x - shape.x);
var angle = rads * (180 / Math.PI) - offset;
//var f = Math.floor(((shape.rotation + 360) % 360) * 0.086);
//thefirstplane.gotoAndStop(f);
//thesecondplane.gotoAndStop(f);
shape.rotation = angle;
console.log("angle:" + angle);
};
var offset = 130; 
this.cyclic.addEventListener("pressmove", fl_MouseClickHandler_2.bind(this));
function fl_MouseClickHandler_2(evt){
var p = this.globalToLocal(evt.stageX, evt.stageY+35);
evt.currentTarget.y = Math.max(520, Math.min(570, p.y));
/*this.cyclic.addEventListener("pressmove", mouseMove);
var rads = math.atan2(stick.y - shape.y, stick.x - shape.x);
offset = rads * (180 / Math.PI) - shape.rotation; */
mouseMove();
};
this.cyclic.addEventListener("mouseup", function(){
this.cyclic.removeEventListener("pressmove",mouseMove);
alert ("angle:" + angle);
});

What I would also like to happen - is when the user clicks (and holds the click) and slides the mouse along the X axis on the stage, that it will move through the frames of the yoke movieclip. What I wrote for that is:

var i = this.yoke.currentFrame;
this.stage.addEventListener("pressmove", fl_MouseClickHandler_3.bind(this));
function fl_MouseClickHandler_3(){
this.yoke.gotoAndStop(++i/2);
}

However - this action seems to be happening when I 'pressmove' my mouse along other movieclips (controlboard, cyclic), but not when I click and move the mouse on the stage. Not sure why this is - any help would be greatly appreciated! I'd also like to give a huge thanks to the forum users who have helped me get this far in my projects.

[Colin Holgate · Accepted solution]

I am slightly guessing here, but with canvas you can have the background be transparent, so that you could superimpose the stage on something else in the page that is interactive. For that to work the stage can't trap the mouse events, they might belong to something under the canvas.

You could put a stage sized symbol there to force the mouse events to work. If you want that to be invisible you might set the alpha to zero, but that again would stop mouse events from working. Setting the alpha to 1 would work, or fill the object with a color that is zero alpha. Using a button is another option, because the Hit frame would be used for detecting mouse events, you don't have to have anything in the other frames inside the button.

[KeelyM]

Ended up adding an invisible button with a hit area larger than the stage, then changing the event listener to target the button. Seems to solve the issue, thank you!