イオンアイテム内の複数のタッチターゲット

Question

私は各イオンアイテムが次のページ（マスター→詳細）にナビゲートするためのhrefを持つイオンリストを持っています。イオンアイテムのタップオンイベントで、（期待どおり）詳細ページにナビゲートします。

ただし、アクションを実行する各イオンアイテムの内側にボタンがあります。ここでの問題は、2つのタッチターゲットがあることです。イオンアイテム内のボタンをタップすると、ボタンのイベントと周囲のイオンアイテムのイベントの両方が発生します。

ion-item内のボタンはng-clickイベントを使用し、イオンアイテムはhrefによって起動されます。

イオンアイテムのhrefイベントを発生させることなく、イオンアイテム内のボタンをタップすることができます。

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()のみが実行されます。

運が良かった！