4

我有一个 Flex 应用程序，我在其中使用 Canvas 来包含其他几个组件。在那幅画布上有一个按钮，用于调用通过系统的特定流程。单击 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>

就目前而言，当您单击按钮时，您将在文本框中看到两个条目，“Button Clicked”，然后是“Canvas Clicked”，即使鼠标只单击了一次。

我想找到一种方法可以避免进行第二个条目，这样当我单击按钮时，只会创建“单击按钮”条目，但是如果我要单击画布中的其他任何位置，则会出现“单击画布”条目仍然会出现。

4

3 回答 3

7

事件继续进行，因为 event.bubbles 设置为 true。这意味着显示层次结构中的所有内容都会收到该事件。要停止事件继续，您调用

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

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

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

于 2008-09-26T13:16:42.843 回答
0

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


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 回答