Highlighted

Mouseout inside iframe not always detected

Participant ,
Aug 29, 2020

Copy link to clipboard

Copied

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? 

Views

71

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Mouseout inside iframe not always detected

Participant ,
Aug 29, 2020

Copy link to clipboard

Copied

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? 

Views

72

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Aug 29, 2020 0
Adobe Community Professional ,
Aug 29, 2020

Copy link to clipboard

Copied

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

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 29, 2020 0
Participant ,
Aug 29, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 29, 2020 0
Adobe Community Professional ,
Aug 30, 2020

Copy link to clipboard

Copied

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.

 

image.pngimage.png

 

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

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 30, 2020 0
Participant ,
Sep 01, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 01, 2020 1
Adobe Community Professional ,
Sep 01, 2020

Copy link to clipboard

Copied

Hi.

 

This is great! I'm glad it worked!

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 01, 2020 0