플렉스 - 포함 된 컴포넌트를 클릭하면 컨테이너에서 클릭 이벤트가 발생하지 않습니다.

Question

Canvas를 사용하여 다른 여러 구성 요소를 포함하는 Flex 어플리케이션이 있습니다. 그 캔버스에는 시스템을 통해 특정 플로우를 호출하는 데 사용되는 버튼이 있습니다. 캔버스의 다른 곳을 클릭하면이 컨트롤이 나타내는 레코드에 대한 자세한 정보가 표시되는 세부 정보 창이 나타납니다.

내가 가지고있는 문제는 사용자가 Button을 클릭 할 때마다 캔버스 안에 버튼이 있기 때문에 Click 이벤트가 Button과 Canvas에서 모두 발생한다는 것입니다. 사용자가 다른 구성 요소로 덮힌 영역을 클릭하면 Canvas 객체에서 클릭 이벤트가 발생하지 않도록하는 방법이 있습니까? 내가 문제를 설명하는 간단한 작은 테스트 응용 프로그램을 만든

: 당신은 당신이 텍스트 상자에 만든 두 개의 항목이 표시됩니다 버튼을 클릭하면 약자로

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> 
    <mx:Script> 
     <![CDATA[ 
      private function onCanvasClick(event:Event):void { 
       text.text = text.text + "\n" + "Canvas Clicked"; 
      } 

      private function onButtonClick(event:Event):void { 
       text.text = text.text + "\n" + "Button Clicked"; 
      } 
     ]]> 
    </mx:Script> 

    <mx:Canvas x="97" y="91" width="200" height="200" backgroundColor="red" click="onCanvasClick(event)"> 
     <mx:Button x="67" y="88" label="Button" click="onButtonClick(event)"/> 
    </mx:Canvas> 
    <mx:Text id="text" x="97" y="330" text="Text" width="200" height="129"/> 
</mx:Application> 

를, "버튼을 클릭했습니다"다음에 마우스를 한 번만 클릭 했더라도 "Canvas Clicked".

버튼을 클릭 할 때만 "버튼 클릭"항목이 만들어 지도록 두 번째 항목을 만들지 않도록 할 수있는 방법을 찾고 싶습니다. 그러나 캔버스의 다른 곳을 클릭하면 "Canvas Clicked"항목이 계속 나타납니다.

Answer 1

event.bubbles가 true로 설정되어 있기 때문에 계속 이벤트가 발생합니다. 즉, 디스플레이 계층의 모든 것이 이벤트를 가져옵니다. 당신은 내가이 개 아이디어가

event.stopImmediatePropagation() 

Answer 2

전화, 계속에서 이벤트를 중지하려면 먼저 시도 :

 

btn.addEventListener(MouseEvent.Click,function(event:MouseEvent):void{ 
    event.stopImmediatePropagation(); 
    ... 
}); 
 

를 작동하지 않는 경우, 참조 캔버스에 클릭 리스너를 추가 할 수있는 경우 버튼이 아니라 이벤트 객체의 대상 속성을 확인하십시오. 뭔가 같은 : 다시

 

btn.addEventListener(MouseEvent.Click,function(event:MouseEvent):void{ 
    if(event.target == btn){ 
     ... 
    } 
    else{ 
     ... 
    } 
}); 
 

, 이들은

Answer 3

Laplie의 대답이 같은 일을 ... 나는 작은 테스트 응용 프로그램을 작성하고이 작업 있는지거야 ... 내 머리 위로의 몇 가지 아이디어입니다 매력. 관심이있는 사람들을 위해 업데이트 된 코드는 다음과 같습니다

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> 
    <mx:Script> 
     <![CDATA[ 
       private function onCanvasClick(event:Event):void { 
         text.text = text.text + "\n" + "Canvas Clicked"; 
       } 

       private function onButtonClick(event:Event):void { 
         text.text = text.text + "\n" + "Button Clicked"; 
         event.stopImmediatePropagation(); 
       } 
     ]]> 
    </mx:Script> 

    <mx:Canvas x="97" y="91" width="200" height="200" backgroundColor="red" click="onCanvasClick(event)"> 
     <mx:Button x="67" y="88" label="Button" click="onButtonClick(event)"/> 
    </mx:Canvas> 
    <mx:Text id="text" x="97" y="330" text="Text" width="200" height="129"/> 
</mx:Application> 

유일한 차이점은 onButtonClick 방법의 하나 개의 추가 라인입니다.