フレックス-囲まれたコンポーネントがクリックされたときに、コンテナでクリックイベントを回避する

StackOverflow https://stackoverflow.com/questions/136413

  •  02-07-2019
  •  | 
  •  

質問

私は、キャンバスを使用して他のいくつかのコンポーネントを含むFlexアプリケーションを持っています。その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>

ボタンをクリックすると、テキストボックスに「ボタンがクリックされました」という2つのエントリが表示されます。次に「クリックされたキャンバス」と表示されます。マウスが1回だけクリックされた場合でも。

ボタンをクリックすると、「ボタンがクリックされた」だけが表示されるように、2番目のエントリを作成しないようにする方法を見つけたいと思います。エントリが作成されますが、キャンバス内のどこかをクリックすると、「Canvas Clicked」が表示されます。エントリは引き続き表示されます。

役に立ちましたか？

解決

event.bubblesがtrueに設定されているため、イベントは継続します。これは、表示階層内のすべてがイベントを取得することを意味します。イベントの継続を停止するには、

を呼び出します 
event.stopImmediatePropagation()

他のヒント

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メソッドに1行追加することです。

2つのアイデアがあります。最初にこれを試してください：


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

それでもうまくいかない場合は、ボタンではなくキャンバスにクリックリスナーを追加できるかどうかを確認し、イベントオブジェクトのターゲットプロパティを確認します。次のようなもの：


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

繰り返しますが、これらは私の頭の上のいくつかのアイデアです...小さなテストアプリを作成し、これらが機能するかどうかを確認します...

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top