离子项目中的多个触摸目标

Question

I have an ion-list where each ion-item has a href to navigate to the next page (master -> detail). So on-tap event of an ion-item it will navigate to the detail page (as expected).

However, I have a button inside each ion-item that performs an action. The issue at hand here is that there are two touch-targets. When tapping on the button inside the ion-item both the button's event is fired as well as the surrounding ion-item's event.

The button inside ion-item uses the ng-click event and the ion-item is fired by the href.

I want to be able to tap the button inside the ion-item without firing the href event on the ion-item.

Answer 1

Add $event.stopPropogation() after executing the desired scope function in ng-click (the deeper one, which is the button in this case).

Example:

<ion-list>
  <ion-item ng-click="someFunction()">
    List Item
    <button class="button button-small" ng-click="anotherFunction(); $event.stopPropagation();;">List Button</button>
  </ion-item>
</ion-list>

For the above example, whenever you click the button, only anotherFunction() will be executed. When you click the list item, only someFunction() will be executed.

Best of luck!