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

我有一个Flex应用程序，其中使用Canvas来包含其他几个组件。在该Canvas上有一个Button，用于调用系统中的特定流。点击画布上的任何其他位置应该会导致出现详细信息窗格，显示有关此控件所代表的记录的更多信息。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>

由于它当您单击该按钮，你会看到在文本框中做了两个条目表示，“按钮被点击”之后“画布点击”，即使只点击一次鼠标。

我想找到一种方法，我可以避免让第二个条目成为当我点击按钮时只有“Button Clicked”条目被创建，但是如果我点击Canvas中的任何其他地方“Canvas Clicked”条目仍然会出现。

来源

2008-09-25 Mike Deck

事件继续，因为event.bubbles设置为true。这意味着显示器上的所有事情都会发生。要继续从停止的情况下，你叫

event.stopImmediatePropagation()

来源

2008-09-25 22:22:26

需要注意的是，这也会阻止当前目标*上的其他事件侦听器*执行。如果您希望执行curent目标上的所有侦听器，并防止事件进一步冒泡，请使用`event.stopPropagation`。 – 2009-12-09 20:19:31

我有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-25 22:22:37 mmattax

应该始终优先使用提供的方法来停止事件的传播，这正是他们所要做的。我想可能有一些情况下，你想使用第二种方法，但它可能非常罕见。 – 2009-12-09 20:24:59

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方法的一个附加行。

来源

2008-09-26 13:16:42

另请参见我对Laplie的另一种方法`event.stopPropagation（）`的回答的评论，这个方法略有不同。（如果您只有一个侦听器在目标上，它们会产生相同的结果。） – 2009-12-09 20:21:56

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

回答

相关问题