如何防止钛合金视图中的事件冒泡？

Question

在文档中，您似乎可以通过将参数传递给文本字段上的click事件来阻止冒泡：

http://docs.appcelerator.com/titanium/3.0/#!/api/Titanium.UI.TextField-event-click

使用他们的新Alloy框架，我有一个像这样声明的文本域：

<TextField id='name' onClick='doStuff' />

在我的控制器中我有这个功能：

function doStuff(e) {
  alert('hello');
}

但是，此元素包含在一个容器元素中，该元素也有一个onClick事件，我想在单击文本字段时阻止该元素触发。我怎么能做到这一点？

Answer 1

尝试：

function doStuff(e){
    e.cancelBubble = true;
    alert('hello');
}

Answer 2

假设您已在xml文件中编写此代码：

<View id = “parent” onClick = “parentClicked”>
        <ImageView id=“sampleImage”  onClick= “childImageClicked”>
        </ImageView> 

</View>

然后

在TSS中尝试：

“#sampleImage” : {

 bubbleParent : false,

}

或者如果您想在Javascript中执行此操作：

function function_name(e){

    e.cancelBubble = true;
}

http://docs.appcelerator.com/platform/latest/#!/api/Titanium.Event-property-cancelBubble

我希望这对你有用。

Answer 3

也许更好的方法是检查源属性。

例如可以说您有以下观点：

<View id="parent" onClick="onParentClicked">
    <View id="child1" onClick="onChild1Clicked"/>
    <View id="child2" onClick="onChild2Clicked"/>
</View>

解决方案1：使用气泡父级属性（长）

您可以像其他答案一样将其写入tss文件：

'#child1': {
    bubbleParent : false,
}
'#child2': {
    bubbleParent : false,
}

但这可能会变得乏味，其中包含许多子元素。

解决方案2：使用Javascript e.cancelBubble（甚至更长）

在javascript中：

function onChild1Clicked(e) {
    e.cancelBubble = true;
}
function onChild2Clicked(e) {
    e.cancelBubble = true;
}

再次这很乏味。

解决方案3：使用Javascript e.source（最佳）

只需检查父事件处理程序上的源是什么

function onParentClicked(e) {
    if (e.source.id !== 'parent') {
        return;
    }
    alert("Parent clicked!");
}

这要快得多。尤其是当您有许多子元素时。