Question

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

我遇到的问题是，因为按钮位于Canvas中，只要用户单击Button，就会在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>

当您单击按钮时，您将看到文本框中的两个条目，“按钮单击”，然后“Canvas Clicked”，即使鼠标仅被单击一次。

我想找到一种方法，我可以避免第二个条目的制作，当我单击按钮时，只有“按钮单击”条目，但如果我要点击画布中的任何其他位置“ Canvas单击“条目仍会出现。

Answer 1

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

event.stopImmediatePropagation()

Answer 2

拉普利的回答就像一个魅力。对于那些感兴趣的人，更新后的代码如下所示：

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

Answer 3

我有2个想法，先试试这个：


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

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


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

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

Flex - 单击封闭组件时，避免在容器上单击事件

3 个答案: