Child views does not receive events

I have been asked to convert to Android a titanium app that was originally written for iOS. Whilst going through the code and removing any iOS specific code, I found that event handling is unpredictable on Android.

Eg: I have a master view to which child views are added. The child views contain buttons and spinners and other UI elements that should receive and respond to user events.

The views are stacked on top of each other with the child view supposed to be covering the entire master view whilst active.

However, When I click on the button inside the child view, it's event listener is completely ignored. In fact, the click is registered on the masterView, which is the view that should be right at the bottom.

This appears to me as if Titanium uses an event capture model as opposed to an event bubbling model. Yet, I cannot find a way to get at the target element that registered the click in the first place.

The same code works just fine on iOS. All the buttons and other elements respond to their own events without ever getting it's parent container involved.

Below is an trimmed down snippet of what my code looks like.

Main.js

.......
    var masterView = Ti.UI.createView({
        width: Titanium.UI.FILL,
        height: Titanium.UI.FILL, 
        top:0, 
        left:0
    });
 
    masterView.addEventListener('click', function(e){
        Ti.API.info('====== Master View hit ====');
    });
 
    var SelectDestination = require('ui/SelectDestination');
    SelectDestination_View = new SelectDestination(self.DB, skynet);
    SelectDestination_View.addEventListener("hidden", hiddenSelectDestination);
 
    masterView.add(SelectDestination_View);
......

ui/SelectDestination.js

function SelectDestination(db, skynetIn) {
 
    var self = Ti.UI.createView({
        left:0,top:0, 
        width: Titanium.UI.FILL, 
        height: Titanium.UI.FILL
    });
 
    self.addEventListener('click', function (e) {
        Ti.API.info( ' ==== Select Destination Hit ==== ' );
    });
 
    var saveButton = Ti.UI.createButton({
        title:'Save',
        width: 225, top:365, height:35, borderWidth:3, borderRadius:7, 
        borderColor:'#3765b6', 
        backgroundImage:'/images/ui/button_green.png', 
        backgroundFocusedImage:'/images/ui/button_green.png', 
        backgroundDisabledImage: '/images/ui/button_greenD.png', 
        backgroundColor:'transparent', 
        font: {fontFamily: 'TUIType', fontSize:20,fontWeight:"bold"}
    });
 
    saveButton.addEventListener( 'click', function (e) {
        Ti.API.info(' ==== Save Button Hit ==== ' );
    });
 
    return.self;
}
module.exports = SelectDestination;

The above code produces the expected visual representation but clicking anywhere produces a console output :

====== Master View hit ====

This indicates that my events have trickled down all the way to the bottom.

What am I doing wrong?

The events will trickle down through all objects unless you set touchEnabled = false.

What I would recommend is to set ids on your objects and check the id in the click event to determine which object was clicked

function SelectDestination(db, skynetIn) {
 
    var self = Ti.UI.createView({
        id :'main_view', // ID SET
        left:0,top:0, 
        width: Titanium.UI.FILL, 
        height: Titanium.UI.FILL
    });
 
    self.addEventListener('click', function (e) {
        Ti.API.info( ' ==== Select Destination Hit ==== '  + e.source.id);
        if ( e.source.id === 'main_view') {
        } else if ( e.source.id === 'save_button') {
        }
    });
 
    var saveButton = Ti.UI.createButton({
        title:'Save',
        id : 'save_button', // ID SET
        width: 225, top:365, height:35, borderWidth:3, borderRadius:7, 
        borderColor:'#3765b6', 
        backgroundImage:'/images/ui/button_green.png', 
        backgroundFocusedImage:'/images/ui/button_green.png', 
        backgroundDisabledImage: '/images/ui/button_greenD.png', 
        backgroundColor:'transparent', 
        font: {fontFamily: 'TUIType', fontSize:20,fontWeight:"bold"}
    });
 
    saveButton.addEventListener( 'click', function (e) {
        Ti.API.info(' ==== Save Button Hit ==== ' );
    });
 
    return.self;
}
module.exports = SelectDestination;