4

Canvas を使用して他のいくつかのコンポーネントを含む Flex アプリケーションがあります。そのキャンバスには、システムを介して特定のフローを呼び出すために使用されるボタンがあります。キャンバスの他の場所をクリックすると、詳細ペインが表示され、このコントロールによって表されるレコードに関する詳細情報が表示されます。

私が抱えている問題は、ユーザーがボタンをクリックするたびにボタンがキャンバス内にあるため、ボタンとキャンバスの両方でクリックイベントが発生することです。ユーザーが別のコンポーネントで覆われた領域をクリックした場合に、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>

ボタンをクリックすると、マウスが 1 回だけクリックされたにもかかわらず、テキスト ボックスに "Button Clicked" と "Canvas Clicked" の 2 つのエントリが表示されます。

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

4

3 に答える 3

7

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

event.stopImmediatePropagation()
于 2008-09-25T22:22:26.947 に答える
1

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行追加されていることです。

于 2008-09-26T13:16:42.843 に答える
0

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


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

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


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

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

于 2008-09-25T22:22:37.197 に答える