Detecting when a mouse leaves a Flex application

The following example shows how you can detect when the mouse leaves the bounds of a Flex application by listening for the stage object’s mouseLeave event.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/22/detecting-when-a-mouse-leaves-a-flex-application/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white"
        applicationComplete="init();">

    <mx:Style>
        Alert {
            modalTransparencyColor: black;
            modalTransparency: 0.6;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.managers.PopUpManager;

            private var _isMouseInSWF:Boolean = false;
            private var alert:Alert;

            [Bindable]
            private function get isMouseInSWF():Boolean {
                return _isMouseInSWF;
            }

            private function set isMouseInSWF(value:Boolean):void {
                _isMouseInSWF = value;
            }

            private function init():void {
                stage.addEventListener(MouseEvent.MOUSE_MOVE, stage_mouseMove);
                stage.addEventListener(Event.MOUSE_LEAVE, stage_mouseLeave);
            }

            private function stage_mouseLeave(evt:Event):void {
                isMouseInSWF = false;
                if (alert) {
                    PopUpManager.removePopUp(alert);
                }
                alert = Alert.show("GONE");
            }

            private function stage_mouseMove(evt:MouseEvent):void {
                if (!isMouseInSWF) {
                    if (alert) {
                        PopUpManager.removePopUp(alert);
                    }
                    // alert = Alert.show("BACK");
                    isMouseInSWF = true;
                }
            }
        ]]>
    </mx:Script>

    <mx:Label text="isMouseInSWF: {isMouseInSWF}" />

</mx:Application>

View source is enabled in the following example.

14 thoughts on “Detecting when a mouse leaves a Flex application

  1. Perfect! I talked to a few people about this, letting them know it’s possible. I think this is perfect for better user interactivity, and has the right application for business/financial displays that would blur sensitive data when the user is not focused in the application, or trying to make a screenshot, etc.

  2. How to use this to module ?

    “stage” This is valid do all application ok?

    stage.addEventListener(MouseEvent.MOUSE_MOVE, stage_mouseMove);

    How to set to module current ?

  3. I’m using

    addEventListener(MouseEvent.MOUSE_MOVE, stage_mouseMove);
    addEventListener(Event.MOUSE_LEAVE, stage_mouseLeave);

    But Event.MOUSE_LEAVE not functional to deactivate

  4. I’ve noticed that when you interact with the browser outside the flash movie, that funkiness happens inside the movie.

    e.g. Highlight the view source line

  5. Great example, but it does have limitations.

    When adding a slider, if you hold the slider thumb down then keep the mouse button pressed and move off the stage, it fires when you release the mouse button.

    However, if the swf is in a table, and you do the same, the event never fires!

  6. Kristian,

    Can you please file a bug at http://bugs.adobe.com/flex/ and include a simple test case, if possible. That may be a bug with the Flex Slider control or possibly Flash Player.

    Peter
    PS: If you can also post the bug number here, a few of us can vote/subscribe to the issue also.

  7. Hi Peter.

    I’ve logged the bug under the Flash Player, as it also happens with Flash CS3, so it’s not limited to Flex.

    Bug number is FP-733.

    Cheers,
    Kristian.

  8. A similar error to the one Kristian documented happens if you have ‘wmode’ set to ‘transparent’, if you leave the stage with the mouse pressed and release outside the event won’t fire, then when you enter the stage again the slider thumb is stuck to the mouse, and when you release you get an error.

    wmode set to transparent has 20+ errors associated with it, avoid it at all costs :) (it’s sometimes unavoidable)

  9. Likewise, it seems that this is limited if you alt+tab to a different window while your mouse is done. It seems as though since the browser is no longer the active window when the mouse up occurs it can’t detect it and therefore no MOUSE_LEAVE event is dispatched.

  10. Hello Everyone,

    I have ran into issues with using this. For example, the mouse leave event is dispatched when a context menu is displayed via right click. So, if you are in the center of the stage and right click, the mouse leaves the stage. So, I modified this example by adding a “mouse border” around the stage and I check to see if the mouse is within the border before it leaves the stage.

    I hope that this helps….
    var mouseOutOnX:Boolean = ( mouseX (stage.width – 10));
    var mouseOutOnY:Boolean = ( mouseY (stage.height – 10));
    if ( ( mouseOutOnX || mouseOutOnY) )
    {
    …….

  11. It should be

    systemManager.stage.addEventListener(Event.MOUSE_LEAVE, stage_mouseLeave);

    vrathore.blogspot.com

  12. Peter – I cut and paste your code to try in AIR to trigger a state change – it successfully changes from initial state to isMouseInSWF state but does not change back on exit. Any ideas?

    thanks, Max

Comments are closed.