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

Multiple touch targets in ion-item

本文关键字：触摸 目标 子项目      更新时间：2024-02-17

我有一个离子列表，其中每个离子项目都有一个href来导航到下一页（主->详细信息）。因此，在离子项目的点击事件中，它将导航到详细信息页面（如预期）。

然而，我在每个离子项目中都有一个按钮来执行一个操作。这里的问题是有两个触摸目标。当点击离子项目内部的按钮时，按钮的事件和周围离子项目的事件都会被触发。

离子项目内的按钮使用ng-click事件，离子项目由href触发。

我希望能够点击离子项目内部的按钮，而不触发离子项目上的href事件。

在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()。

祝你好运！

相关文章：