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

Question

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

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

使用他们的新合金框架，我有一个这样声明的文本字段：

<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”&gt;
        <ImageView id=“sampleImage”  onClick= “childImageClicked”&gt;
        </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：使用气泡父属性 (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!");
}

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