【问题标题】：How do I prevent event bubbling in a Titanium Alloy view?如何防止钛合金视图中的事件冒泡？
【发布时间】：2013-02-15 04:24:36
【问题描述】：

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

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 事件，我想防止在我单击文本字段时触发该事件。我怎样才能做到这一点？

【问题讨论】：

标签： javascript ios titanium titanium-alloy

【解决方案1】：

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

例如假设您有以下观点：

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

解决方案一：使用气泡父属性（Long）

你可以像其他答案一样写在 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!");
}

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

【讨论】：

【解决方案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

我希望这对你有用。

【讨论】：

【解决方案3】：

试试：

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

【讨论】：