Mouseout inside iframe not always detected

[jiggy1965]

I've put a button right at the bottom. On mouseover on that button an object should appear at the bottom. And on mouseout it should disappear again. Pretty straightforward. I wrote this code for it:

var frequency = 20;
stage.enableMouseOver(frequency);
var target = this.mybtn;
canvas.style.cursor = "pointer";
target.addEventListener("mouseover", gotoMouseOver);
target.addEventListener("mouseout", gotoMouseOut);
function gotoMouseOver(e){
target.gotoAndStop("on");
}
function gotoMouseOut(e){
target.gotoAndStop("off")
}

By itself it works perfectly. When I hover over the green button the purple rectangle appears and on mouseout it disappears again.

The problem is when I put this html file inside an iframe. Because the green button is right at the bottom right a mouseout on it isn't always detected. So on mouseover the purple rectangle appears but on mouseout it not always disappears.

The file is instended to be use for an online ad so it will have to be used for inside an iframe. I know I could have an eventlistener set on the canvas instead, but I wish it to be only on the button this time. It is meant for a disclaimer to appear so it should appear when I hover over the rest of the banner. Just when I hover over the bottom right button.

I also tried to check for the stage bounds so I could check if the cursor is over and out of the stage, but inside an iFrame that didn't work either. When I move the cursor quickly outside the banner to outside the iframe it doesn't always see that the cursor is outside the stage

Does anyone have a workaround for this? 

[JoãoCésar]

Hi.

Do you have a link for us to test? Probably some instance is getting in the way and causing the mouseout event to not be detected as it should.

Also, you could accomplish this same interactivity without code by using a regular Button and placing the Movie Clip instance in the Over frame.

Please let us know.

Regards,

JC

[jiggy1965]

Can't upload sample files in html or zip here so I'll send a wetransfer url:

https://we.tl/t-O3WDj0UFnx

Two versions One with a movieclip and one with a button. You'll notice that individually mouseout1.html and mouseout2.html work normally. But when you open index.html, which embeds mouseout1.html and mouseout2.html inside an iframe, you'll notice that mouseout's on both are rarely detected and it fails in getting that purple rectangle disappear when the cursor moves outside the iframe.

[JoãoCésar]

Hi.

Thanks for the file.

If you don't want or can't add a listener to the stage or canvas, the only workaround that worked for me and that's easy to apply is to go to the Hit frame of the button and remove 1 pixel in each side of the shape that works as the hit area. In this way the mouseout event will be fired even if the appearance doesn't suggest it.

I know this isn't the ideal solution, but it may be justifiable compared to a complex setup for such a simple interactivity.

Please let us know.

Regards,

JC

[jiggy1965]

Thanks. That indeed seems to work better. I shrunk that hitarea a bit more, 5 pixels or so and now the mouseout is better recognized when the file is inside an iframe. I already had an eventlistener on the canvas for the cta button, but I needed a separate one for that button at the bottom which is meant for a popup info window at the bottom. You sollution or shrinking the hitarea makes it work better from within, so thanks again

[JoãoCésar]

Hi.

This is great! I'm glad it worked!