在另一个组件上管理组件上的点击事件

Question

我有一个带有水龙头监听器（红色方块）的面板，上面有一个按钮（绿色）。像这样：

当按下按钮时我想避开红色方块的敲击侦听器，但我找不到这样做的方法。你能帮帮我吗？

这个例子不完全是我的代码（我使用控制器，数据项等），但是同样的问题：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内，你可以检查target的{​​{1}}，看看它是否是绿色方块：

tap event

请注意，在这种情况下，我正在使用parentNode来正确遵循Sencha Touch的HTML结构。您可以使用inspect元素工具更好地理解它。

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