ion-item 中的多个触摸目标

Question

我有一个 ion-list ，其中每个 ion-item 都有一个 href 以导航到下一页（主 -> 详细信息）。因此，离子项目的点击事件将导航到详细信息页面（如预期的那样）。

但是，我在每个执行操作的 ion-item 内都有一个按钮。这里的问题是有两个触摸目标。当点击 ion-item 内的按钮时，会触发按钮的事件以及周围的 ion-item 的事件。

ion-item 内的按钮使用 ng-click 事件，ion-item 由 href 触发。

我希望能够在不触发 ion-item 上的 href 事件的情况下点击 ion-item 内的按钮。

Answer 1

在ng-click中执行所需的作用域函数后添加$event.stopPropogation()（较深的，在本例中为按钮）。

示例：

<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>

对于上面的例子，每当你点击按钮时，只会执行anotherFunction()。点击列表项时，只会执行someFunction()。

祝你好运！