Event handler functions of nested components called

ionic-v1
1

UPDATE: Please ignore. I have found the solution.

I have this GUI design, where a list item has a small button on its right:

<ion-list>
  <ion-item class="item-button-right" ng-click="doSomething()">
    Do something
    <button class="button button-positive" ng-click="showPopup()"> 
      <i class="icon ion-gear-a"></i>
    </button>
  </ion-item>
</ion-list>

$scope.doSomething = function(){
  console.log("doSomething called.");
}

$scope.showPopup = function() {
  console.log("showPopup called.");
}

I tested it on both phone and desktop browser with different outcome. It consistently shows both showPopup() and doSomething() get called, even when I deliberately tap on the inner right button only to show popup. I am thinking if there’s a need to return false or invoke a e.preventDefault() within showPopup().

Is there some way to prevent the doSomething() for the outer list item to be run if I only tap on the right inner popup button?

2

What is the solution you found?

3

I need to call $event.stopPropagation() inside showPopup() for the button to prevent the click event from propagating upward to the parent list item doSomething() ng-click handler.

1 Like