AS3 MovieClip click event not working - actionscript-3

Question

I'm working on a flash slider using as3 and cannot get the click event to fire which clicked on a MovieClip.
The click event works perfectly when targeting the stage but not any MC.
Below is all the code in the project.
The part in question is toward the bottom of SLIDER.as
canvas.addEventListener(MouseEvent.CLICK, this.canvasClick);
The stage and library are both empty. Thank you in advance.
PS: I'm pretty new to flash.
MAIN.AS
package {
import flash.display.MovieClip;
import flash.events.Event;
public class Main extends MovieClip {
public function Main() {
addEventListener(Event.ADDED_TO_STAGE, init)
}
private function init(e:Event){
var images:Array = new Array("./media/engines/Engines-1.jpg", "./media/engines/Engines-2.jpg", "./media/engines/Engines-3.jpg", "./media/engines/Engines-4.jpg", "./media/engines/Engines-5.jpg", "./media/engines/Engines-6.jpg", "./media/engines/Engines-7.jpg", "./media/engines/Engines-8.jpg", "./media/engines/Engines-9.jpg", "./media/engines/Engines-10.jpg", "./media/engines/Engines-11.jpg", "./media/engines/Engines-12.jpg", "./media/engines/Engines-13.jpg");
var slider:Slider = new Slider(stage, images);
}
}
}
SLIDER.AS
package {
import flash.display.MovieClip;
import flash.display.Stage;
import flash.events.Event;
import flash.events.MouseEvent;
public class Slider extends MovieClip {
private var images:Array;
private var STAGE:Stage;
private var stageWidth:Number;
private var stageHeight:Number;
private var centerX:Number;
private var centerY:Number;
private var tsHeight:Number = 100;
private var tsPadding:Number = 10;
public function Slider(stageGlobal, imageConfig:Array) {
this.STAGE = stageGlobal;
this.images = imageConfig;
this.stageWidth = this.STAGE.stageWidth;
this.stageHeight = this.STAGE.stageHeight;
this.centerX = this.stageWidth / 2;
this.centerY = this.stageHeight / 2;
this.createCanvas();
}
public function createCanvas():void {
// SLIDER HOLDER
var canvas:MovieClip = new MovieClip();
canvas.graphics.drawRoundRect(0, 0, this.stageWidth, this.stageHeight, 15, 15);
canvas.opaqueBackground = 0xDDDDDD;
canvas.mouseEnabled = true;
this.STAGE.addChild(canvas);
// HEADER / TITLE HOLDER
var header:MovieClip = new MovieClip();
header.graphics.drawRoundRect(0, 0, this.stageWidth, 40, 15, 15);
header.opaqueBackground = 0x000000;
canvas.addChild(header);
// FOOTER ACTION HOLDER
var footer:MovieClip = new MovieClip();
footer.graphics.drawRoundRect(0, this.stageHeight - 40, this.stageWidth, 40, 15, 15);
footer.opaqueBackground = 0x000000;
canvas.addChild(footer);
// THUMBSTRIP HOLDER
var thumbstrip:MovieClip = new MovieClip();
thumbstrip.graphics.drawRoundRect(0, this.stageHeight - 160, this.stageWidth, 120, 15, 15);
thumbstrip.opaqueBackground = 0x555555;
canvas.addChild(thumbstrip);
canvas.addEventListener(MouseEvent.CLICK, this.canvasClick);
}
private function canvasClick(e:MouseEvent):void {
trace(e);
}
}
}

Answer 1

It probably has to do with the way you're drawing your MovieClips.
From the docs: "The opaque background region does not respond to mouse events."
Try drawing rectangles like this:
// SLIDER HOLDER
var canvas:MovieClip = new MovieClip();
canvas.graphics.beginFill(0xDDDDDD);
canvas.graphics.drawRoundRect(0, 0, this.stageWidth, this.stageHeight, 15, 15);
canvas.graphics.endFill();
canvas.mouseEnabled = true;
this.STAGE.addChild(canvas);

Answer 2

You need to add Event after slider added to stage so in the slider class you need to write
package {
import flash.display.MovieClip;
import flash.display.Stage;
import flash.events.Event;
import flash.events.MouseEvent;
public class Slider extends MovieClip {
private var images:Array;
private var STAGE:Stage;
private var stageWidth:Number;
private var stageHeight:Number;
private var centerX:Number;
private var centerY:Number;
private var tsHeight:Number = 100;
private var tsPadding:Number = 10;
public function Slider(stageGlobal, imageConfig:Array) {
this.STAGE = stageGlobal;
this.images = imageConfig;
this.addEventListener(Event.ADDED_TO_STAGE, added);
}
public function added(e:Event)
{
this.stageWidth = this.STAGE.stageWidth;
this.stageHeight = this.STAGE.stageHeight;
this.centerX = this.stageWidth / 2;
this.centerY = this.stageHeight / 2;
this.createCanvas();
}
public function createCanvas():void {
// SLIDER HOLDER
var canvas:MovieClip = new MovieClip();
canvas.graphics.drawRoundRect(0, 0, this.stageWidth, this.stageHeight, 15, 15);
canvas.opaqueBackground = 0xDDDDDD;
canvas.mouseEnabled = true;
this.STAGE.addChild(canvas);
// HEADER / TITLE HOLDER
var header:MovieClip = new MovieClip();
header.graphics.drawRoundRect(0, 0, this.stageWidth, 40, 15, 15);
header.opaqueBackground = 0x000000;
canvas.addChild(header);
// FOOTER ACTION HOLDER
var footer:MovieClip = new MovieClip();
footer.graphics.drawRoundRect(0, this.stageHeight - 40, this.stageWidth, 40, 15, 15);
footer.opaqueBackground = 0x000000;
canvas.addChild(footer);
// THUMBSTRIP HOLDER
var thumbstrip:MovieClip = new MovieClip();
thumbstrip.graphics.drawRoundRect(0, this.stageHeight - 160, this.stageWidth, 120, 15, 15);
thumbstrip.opaqueBackground = 0x555555;
canvas.addChild(thumbstrip);
canvas.addEventListener(MouseEvent.CLICK, canvasClick);
}
private function canvasClick(e:MouseEvent):void {
trace(e);
}
}
}
I hope it would help :)