通过另一个组件管理组件上的轻击事件

Question

我有一个带轻敲监听器（红色方块）的面板，并在其上有一个按钮（绿色）。事情是这样的：

当按钮被按下我想避免红色正方形的抽头监听器，但我不能找到这样做的方式。你可以帮帮我吗？

这个例子不正是我的代码（即时通讯使用的控制器，dataitems等），但也是同样的问题：http://jsfiddle.net/6ah6U/

Ext.Viewport.add({ 
    xtype: 'panel', 
    height: 300, 
    width: 300, 
    style: 'background: #ff0000', 
    items: [{ 
     xtype: 'panel', 
     height: 50, 
     width: 50, 
     style: 'background: #00ff00', 
     listeners: { 
      tap: function() { 
       console.log('green tapped'); 
      }, 
      element: 'element' 
     }, 
    }], 
    listeners: { 
     tap: function() { 
      console.log('red tapped'); 
     }, 
     element: 'element' 
    }, 
}); 

谢谢！

Answer 1

只停留在功能处理的自来水事件的绿色面板上的事件的传播：

tap: function(btn, e) { 
    alert('green tapped'); 
    e.stopPropagation(); 
}, 

希望这有助于

Answer 2

首先，你可以给你的绿色广场的ID：

....... 
height: 50, 
width: 50, 
id: 'green' 
....... 

内。然后你红场这是你的父元素listeners，您可以检查您tap event的target看它是否是绿色的方形或没有：

listeners: { 
    tap: function(e, node) { 
     if(node.parentNode.id !== 'green') { 
      console.log('red tapped'); 
     } 
    }, 
    element: 'element' 
} 

请注意，我用parentNode正确遵循煎茶触摸的HTML结构在这种情况下。您可以使用检查元素工具更好地了解它。

更新演示：http://jsfiddle.net/6ah6U/1/