Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

Click Event Propagation

When adding a view with buttons to a table row, is there anyway to stop the click event propagation so that it doesn't bubble up to the table row when I click a button. here's the example code below:

    var row = Ti.UI.createTableViewRow({
        hasChild: true, 
        id: win.allTodos[i].id, 
        test: 'privateTodos.js'

    var checkBox = Ti.UI.createButton({
        backgroundImage: '../images/icons/slug-check.png', 
        zIndex: 10,
        height: 22, 
        width: 22, 
        left: 0, 
        top: 10, 

    checkBox.addEventListener('click', function(e){
        alert('you just clicked the button'); 

    row.addEventListener('click', function(e){
        alert('you clicked a row'); 
— asked March 15th 2010 by John Wilson
  • event
  • propagation
  • row
  • stop
  • table
  • view

2 Answers

  • Accepted Answer

    This is a good question and unfortunately, you can't currently stop the propagation. We will likely add this in a near future release.

    However, you can check the source property and only do your logic if it matches your object reference or another property against the source. You could then ignore if not the source you're wanting to handle.

    — answered March 16th 2010 by Jeff Haynie
    • Is this still not possible?

      — commented January 11th 2012 by Christoffer T. Timm
    • Doesnt appear to be possible, at least not in 1.7.5 which I'm working on. I had to write a setTimeout like this from the button inside the row:

       var clearButton = Ti.UI.createButton({ 
                 m_pParent: row,
                 backgroundImage: '/content/images/browse/clearBtn.png'
              } );
      clearButton.addEventListener( 'click', function(e){
            // do some unique function
                var target  = e.source;
                if( "m_pParent" in target )
                    target  = target.m_pParent;
            // call timeout to reset the row to be active
                 setTimeout(function() {
                  target.nowActive = 'true';
                }, 500);
       } );

      — commented January 30th 2012 by Mark Goldsmith
    • This method doesn't work particularly well when you have a window with a touch event and you only want to stop 1 button in the window from propagating another touch event.

      — commented November 14th 2012 by Dallas Clark
    • From 'answered 3 years ago' to 'near future release', how is it that it's still not implemented? but many thanks for the trick with source :)

      — commented December 11th 2012 by Kevin Purnelle
  • The best approach that I've come to is using the following method on events you don't want triggered by other elements on the window

    window.addEventListener("singletap", function(e) {
        if(e.source != element_1
        && e.source != element_2) {
            // Do something
    — answered November 14th 2012 by Dallas Clark
The ownership of individual contributions to this community generated content is retained by the authors of their contributions.
All trademarks remain the property of the respective owner.