iframe onmouseout capture

Question

Hi,

I currently have an iframe within my parent page and I was wondering whether it's possible to capture a onmouseout event to trap when the user clicks or moves outside the iframe border, i.e back onto parent page.

Would really appreciate some help.

Thanks. Tony.

Answer 1

You should be able do a document.body.onmouseleave/onmouseout (see edits) in the iframe's page. Since it bubbles you'll have to check that it was actually the body that fired the event.

document.body.onmouseout = function ()
{
    if (event.srcElement == document.body)
    {
        // put your code here
    }
}

EDIT: My mistake, onmouseleave doesn't bubble, so the if statement there isn't necessary. onmouseleave doesn't work for other browsers, so you should use onmouseout and keep the if statement in since onmouseout does bubble.

if you're only bothered about IE6, put the following <script> tag into your iframe page's code (preferably the header).

<script type="text/javascript">
document.documentElement.onmouseleave = function ()
{
    alert('mouse left the iframe');
}
</script>

See the MSDN documentation here