sencha-touch-2 - 管理一个组件上的点击事件而不是另一个组件

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你的tap event，看看它是否是绿色方块：

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

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

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