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

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

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

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

按我们单击按钮时的状态，即使只单击了一次鼠标，也将在文本框中看到两个条目："单击按钮"，然后是"单击画布"。

我想找到一种避免第二次输入的方法，当我单击"按钮"时，仅创建"按钮单击"条目，但是如果我要在"画布"中的其他任何位置单击，则"单击画布"条目仍会出现。

解决方案

由于event.bubbles设置为true，因此事件继续进行。这意味着显示层次结构中的所有内容都会获得该事件。要阻止事件继续进行，请致电

event.stopImmediatePropagation()

我有2个想法，请先尝试以下方法：

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

如果不起作用，请查看是否可以将Click侦听器添加到画布而不是按钮，然后检查事件对象的target属性。就像是：

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

再说一遍，这些都是我脑海中的点子……我将创建一个小型测试应用程序，看看它们是否有效……

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方法中的另一行。