Apache flex Flex-单击封闭组件时避免容器上的单击事件

我有一个Flex应用程序，其中我使用画布来包含几个其他组件。在画布上有一个按钮，用于调用系统中的特定流。单击画布上的任何其他位置都会导致出现详细信息窗格，其中显示有关此控件所表示记录的更多信息

我遇到的问题是，由于用户每次单击按钮时按钮都位于画布内，因此在按钮和画布上都会触发单击事件。如果用户单击另一个组件覆盖的区域，是否有任何方法可以避免在画布对象上触发单击事件

我创建了一个简单的小测试应用程序来演示这个问题：

<?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>

当您单击按钮时，您将看到文本框中有两个条目，“button Clicked”后跟“Canvas Clicked”，即使鼠标只单击了一次

---

我想找到一种方法，避免创建第二个条目，这样当我单击按钮时，只生成“Button Clicked”条目，但如果我单击画布中的其他任何位置，“Canvas Clicked”条目仍会出现。

事件继续，因为event.bubbles设置为true。这意味着显示继承权中的所有内容都将获得事件。要阻止事件继续，请调用

event.stopImmediatePropagation()

---

我有两个想法，首先试试这个：

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

如果这不起作用，请查看是否可以将单击侦听器添加到画布而不是按钮，并检查事件对象的目标属性。比如：

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

---

同样，这些都是我脑海中的想法……我将创建一个小的测试应用程序，看看这些是否有效……

拉普利的答案很有魅力。对于感兴趣的人，更新后的代码如下所示：

<?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方法中增加了一行。

应该注意，这也会阻止当前目标上的任何其他事件侦听器执行。如果您希望当前目标上的所有侦听器都执行，并且只是防止事件进一步冒泡，请使用

event.stopPropagation

。另请参阅我对Laplie回答的另一种方法

event.stopPropagation（）

的评论，该方法有细微的不同。（如果目标上只有一个侦听器，它们会产生相同的结果。）最好使用提供的方法停止事件的传播，这正是它们要做的。我想在某些情况下，您可能会希望使用第二种方法，但这可能非常罕见。