Mehrere Touch-Ziele in Ion-Item

Question

Ich habe eine Ion-Liste, wo jedes Ion-Element eine href hat, um zur nächsten Seite zu navigieren (Master -> Detail). Wenn also ein ion-item auf tap-ereignis geht, navigiert es wie erwartet zur detailseite.

Allerdings habe ich einen Knopf in jedem Ion-Element, das eine Aktion ausführt. Das Problem hier ist, dass es zwei Touch-Ziele gibt. Wenn du auf den Knopf im Ion-Item tippst, wird sowohl das Ereignis der Taste als auch das Event des umgebenden Ion-Items ausgelöst.

Die Schaltfläche in ion-item verwendet das ng-click-Ereignis und das ion-item wird von der href ausgelöst.

Ich möchte in der Lage sein, den Knopf innerhalb des Ion-Item zu tippen, ohne das href-Ereignis auf dem Ion-Element zu feuern.

Answer 1

Fügen Sie $event.stopPropogation() hinzu, nachdem Sie die gewünschte Bereichsfunktion in ng-click ausgeführt haben (die tiefere, die in diesem Fall die Schaltfläche ist).

Beispiel:

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

Für das obige Beispiel, wenn Sie auf die Schaltfläche klicken, nur anotherFunction() ausgeführt. Wenn Sie auf das Listenelement klicken, wird nur someFunction() ausgeführt.

Viel Glück!