PopUpAnchor - "click"및 "mouseDownOutside"이벤트 처리기 간의 충돌

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>