Unpredictable/Stubborn click event | HTML5 JS

[pmwpmw]

Hello

I have a click event on a MovieClip that only intermittently/arbitrarily responds. There is also a RollOver/Out event that responds alright, so I know the bounding box is working. I have put a rectangle at 0% Alpha inside the MovieClip just to cover more area. I have another click event in the beginning of the video (seen below) that works correctly 100% of the time. I put a small animation on my cursor each time I click in order to see where and when I am clicking.

here is the code relevant to the "info" MovieClip

this.info.addEventListener("click", fl_MouseClickHandler.bind(this));
function fl_MouseClickHandler(e) { 
     if (e.currentTarget == this.info) {
          alert("clicked!");
     }
}
stage.enableMouseOver(3);
this.info.addEventListener("rollover", MouseEventHandler.bind(this));
this.info.addEventListener("rollout", MouseEventHandler.bind(this));
function MouseEventHandler(e) {
     e.currentTarget.play();
}

Is this a common problem with roll over/outs and click events? Any advice? Thanks

Max

[franciscog47374926]

Hi,

Try checking if the object this.info already has en eventlistener before applying one to it.

Like this.

if(!this.info.hasEventListener("click"));

this.info.addEventListener("click", fl_MouseClickHandler.bind(this));

the rest of the code should be fine..

I had a similar problem and i thought it could help you. Strange buttons behavior

Regards,

[pmwpmw]

Hey There,

Thanks for your response. I tried your method, and it wasn't the solution for this particular problem, but I could see that being handy when I incorporate navigation into this canvas project.

I did find a solution however: I mentioned above that I put a rectangle inside the MovieClip at 0% Alpha to make a "hit box" of sorts. If I raise that Alpha up from 0% to 1%, the click event works perfectly and the Roll Over/Out events behave more consistently as well

In short, Animate CC doesn't respond to transparent objects. It needs at least a little bit of opacity to register events.

[ClayUUID · Accepted solution]

The rollover was working perfectly consistently: It was detecting rollover when the mouse moved over visible pixels. The correct way to force a more contiguous rollover area is to assign a display object to the the movie clip's hitArea property, but yes, using a 1% alpha rect works too.

https://createjs.com/docs/easeljs/classes/MovieClip.html#property_hitArea

https://www.createjs.com/tutorials/Mouse%20Interaction/

[pmwpmw]

Very helpful! For archival purposes, here is the code that works for me using the hitArea property. Just curious. I drew all of the hitArea shapes at W: 140 H: 45. Is there a way to get the height and width for the targeted MovieClip? Something along the lines of the method ".getMeasuredHeight()" and ".getMeasuredWidth()" that I've seen appear in other classes. Thanks!

//Stores all MovieClips that will be assigned a hitArea and EventListeners
var mc = [this.info, this.work, this.news, this.header]; 
stage.enableMouseOver(3);
//Loops through array and adds hitArea and EventListeners
for(var i=0; i<mc.length;i++) {
     if(mc.hitArea == null) {
          var hit = new createjs.Shape();
          hit.graphics.beginFill("#000").drawRect(-70, -22.5, 140, 45); //adds hitArea (W:140 H:45) directly in the center of MovieClip 
          mc.hitArea = hit;
     }
     if(!mc.hasEventListener("click")) {
          mc.addEventListener("click", fl_MouseClickHandler.bind(this));
     }
     if(!mc.hasEventListener("rollover")) {
          mc.addEventListener("rollover", MouseEventHandler.bind(this));
     }
     if(!mc.hasEventListener("rollout")) {
          mc.addEventListener("rollout", MouseEventHandler.bind(this));
     }    
}

note: functions fl_MouseClickHandler, MouseEventHandler not shown. 

[ClayUUID]

Use the properties nominalBounds.width and nominalBounds.height to get the unscaled, unrotated width and height of any movieclip. This property is added by the Animate exporter and is not part of the base CreateJS library.