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>