Geek asks and answers

How to prevent bubbling of events in a titanium alloy?

The documentation seems that you can prevent bubbles by passing arguments to click events in the text box:

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

Using their new Alloy structure, I have a text box declared like this:

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

and in my controller I have this function:

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

However, this element is wrapped in a container element that also has an onClick event, and I would like this to not fire when I click on the text box. How can i do this?

+6
source share
3 answers

Try:

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

Suppose you wrote this code in an XML file:

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

</View>

Then

Try this in TSS:

"#sampleImage" : {

 bubbleParent : false,

}

Javascript:

function function_name(e){

    e.cancelBubble = true;
}

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

, .

+1

, - .

, , :

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

1. bubble (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!");
}

. , .

0

More articles:


All Articles