我如何防止事件冒泡在钛合金视图

How do I prevent event bubbling in a Titanium Alloy view?

本文关键字：钛合金 视图 何防止 事件      更新时间：2023-09-26

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

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事件，我想防止一个从触发当我点击文本字段。我怎样才能做到这一点?

尝试:

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

假设您已经在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

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

。假设您有以下视图:

<View id="parent" onClick="onParentClicked">
    <View id="child1" onClick="onChild1Clicked"/>
    <View id="child2" onClick="onChild2Clicked"/>
</View>
解决方案1:使用bubble parent属性(Long)

您可以像其他答案一样，在tss文件中写入:

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

但是如果有很多子元素，这会变得很繁琐。

解决方案2:使用Javascript . cancelbubble(甚至更长)

在javascript中:

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

这又很乏味。

解决方案3:使用Javascript .source (Best)

检查父事件处理程序的源是什么:

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

这样快多了。

相关文章：