Question

我有一个PopUpAnchor来显示一些内容。我添加了一个mouseDownOutside事件处理程序，因此如果用户在弹出内容外单击，弹出内容将被隐藏。这很好。

我还希望按钮控制显示弹出窗口作为切换功能，这样如果显示弹出窗口内容并点击按钮，内容将被隐藏。

以下代码中发生的情况是，弹出的内容显示，如果单击该按钮，则调用mouseDownOutside事件处理程序，然后调用click处理程序，以便隐藏弹出内容然后再次显示。

有没有办法可以解决这个问题而没有复杂性（例如动态添加和删除eventListeners）？

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/mx"
                       width="1024" height="768">
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            import mx.events.FlexMouseEvent;


            protected function managePopup(event:MouseEvent):void
            {
                if (popupContent.isPopUp == false){
                    trace("managePopup -- opening");
                    popUp.displayPopUp = true;

                } else {
                    trace("managePopup -- closing");
                    popUp.displayPopUp = false;
                }
            }
        ]]>
        </fx:Script>

        <s:Group x="10" y="10">
            <!-- Button used to open PopUp -->
            <s:Button id="openBtn" label="Open PopUp" 
                      click="managePopup(event)"/>

            <!-- PopUpAnchor component set to same size as openBtn to ensure that
            popUp will be positioned relative to the button -->
            <s:PopUpAnchor id="popUp" 
                           popUpPosition="right" 
                           width="92" height="21">
                <!-- BorderContainer to hold popUp contents -->
                <s:BorderContainer id="popupContent" 
                                   mouseDownOutside="managePopup(event)">            
                    <s:layout>
                        <s:VerticalLayout paddingTop="5" 
                                          paddingLeft="5" 
                                          paddingBottom="5" 
                                          paddingRight="5"/>
                    </s:layout>
                    <s:Form>                                            
                        <s:FormItem label="Name :">
                            <s:TextInput/>
                        </s:FormItem>                                            
                        <s:FormItem label="E-Mail :">
                            <s:TextInput/>
                        </s:FormItem>
                    </s:Form>                            
                    <s:HGroup>                                                                
                        <!-- Button used to close popUp -->
                        <s:Button label="CLOSE" click="managePopup(event)"/>
                    </s:HGroup>                
                </s:BorderContainer>                        
            </s:PopUpAnchor>    
        </s:Group>

</s:WindowedApplication>

Answer 1

您可以使用MouseEvent.relatedObject执行您要查找的内容，它会向您提供指向设备现在指向的显示列表对象，如果它是您的openBtn按钮，那么您可以退出功能和按钮将关闭弹出窗口。当然，您应该验证MouseEvent.currentTarget是BorderContainer组件，并且openBtn是鼠标的新目标。

为此，您可以这样做：

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/mx"
                       width="1024" height="768">
    <fx:Script>
        <![CDATA[

            import mx.events.FlexMouseEvent;            

            protected function managePopup(event:MouseEvent):void
            {                   
                if (popupContent.isPopUp == false){

                    openBtn.label = "Close PopUp";
                    popUp.displayPopUp = true;

                } else {

                    if(event.currentTarget){
                        if(event.relatedObject){
                            if(event.currentTarget.name == "popup_border" && 
                               event.relatedObject.name == "open_close_btn"
                            ){
                                return;
                            }
                        }
                    }
                    openBtn.label = "Open PopUp";
                    popUp.displayPopUp = false;

                }

            }

        ]]>
    </fx:Script>

    <s:Group x="10" y="10">
        <!-- Button used to open PopUp -->
        <s:Button id="openBtn" label="Open PopUp" name="open_close_btn"
                  click="managePopup(event)"/>

        <!-- PopUpAnchor component set to same size as openBtn to ensure that
        popUp will be positioned relative to the button -->
        <s:PopUpAnchor id="popUp" 
                       popUpPosition="right" 
                       width="92" height="21">
            <!-- BorderContainer to hold popUp contents -->
            <s:BorderContainer id="popupContent" mouseDownOutside="managePopup(event)" name="popup_border">            
                <s:layout>
                    <s:VerticalLayout paddingTop="5" 
                                      paddingLeft="5" 
                                      paddingBottom="5" 
                                      paddingRight="5"/>
                </s:layout>
                <s:Form>                                            
                    <s:FormItem label="Name :">
                        <s:TextInput/>
                    </s:FormItem>                                            
                    <s:FormItem label="E-Mail :">
                        <s:TextInput/>
                    </s:FormItem>
                </s:Form>                            
                <s:HGroup>                                                                
                    <!-- Button used to close popUp -->
                    <s:Button label="CLOSE" click="managePopup(event)"/>
                </s:HGroup>                
            </s:BorderContainer>                        
        </s:PopUpAnchor>    
    </s:Group>  
</s:WindowedApplication>

PopUpAnchor - “click”和“mouseDownOutside”事件处理程序之间的冲突

1 个答案: