ionische 2 - stop ein Click-Ereignis

Question

Hier ist mein html:

<ion-card *ngIf="oefening1" (click)="navigate($event, oefening1, oefening2, oefening3, oefening4)"> 
    <img src="assets/img/{{ oefening1 }}.jpg"/> 
    <div *ngFor="let exercise of exerciseIsDone;"> 
    <div *ngIf="exercise.done && exercise.exercise == oefening1" class="overlay"> 
     <ion-icon name="checkmark-circle" class="checkmark"></ion-icon> 
    </div> 
</div> 

Ich habe eine Funktion wie folgt aus:

navigate(event, exercise, exercise2, exercise3, exercise4){ 
    for (var i = 0; i < this.exerciseIsDone.length; i++) { 
      console.log('forLoop: ',this.exerciseIsDone[i]); 

      if(this.exerciseIsDone[i].done){ 
      console.log(event.stopPropagation()); 
      event.stopPropagation(); 

      console.log(event.target); 
      console.log('DONE!!!!!'); 
      } 
    } 


    this.navCtrl.push(exerciseSlides, { 
      clickedExercise: exercise, 
      secondExercise: exercise2, 
      thirdExercise: exercise3, 
      fourthExercise: exercise4 
    }); 
} 

Aber es wird stil ausführen und die console.log(event.stopPropagation()); ist nicht definiert.

Also im Grunde, was ich tun möchte ist, wenn die Übung fertig ist, sollte es nicht klickbar sein (nicht zur nächsten Seite navigieren). Wie kann ich das beheben ??

Und die target Protokoll sagt, dass <div class="overlay"> Ich weiß nicht, ob dies das Problem verursacht?

Answer 1

Ich habe einige Annahmen.

Erste, sagen Sie, dass

target Protokoll sagt, dass <div class="overlay">

Ich glaube, Sie auf das Element geklickt. Wenn Sie eines der <img> Tag der target geklickt hätte <img> gedruckt

Zweite, ich weiß nicht, warum Sie event.stopPropagation() verwenden. Es wird in dem Mechanismus Event Bubbling verwendet. Wie wir aus der Dokumentation lesen.

Wenn ein Ereignis auf einem Element passiert, werden zuerst die Handler auf ihm ausgeführt, dann auf seinem Elternelement und dann auf allen anderen Vorfahren.

So Ihre event.stopPropagation() wird aufhören, das Ereignis zu einem Elternteil des Elements zu verbreiten. Wenn Sie nur genau dort den Aufruf der Funktion stoppen möchten, können Sie dies einfach tun:

if(this.exerciseIsDone[i].done){ 
    return; 
} 

Aber, wenn Sie nur wollen, die für Schleife stoppen können Sie es auf diese Weise tun:

if(this.exerciseIsDone[i].done){ 
    break; 
} 

@edit Voll Beispiel:

navigate(event, exercise, exercise2, exercise3, exercise4){ 
    for (var i = 0; i < this.exerciseIsDone.length; i++) { 
      console.log('forLoop: ',this.exerciseIsDone[i]); 

      if(this.exerciseIsDone[i].done){ 
      return; //immediately stops invocation of this function 
      } 
    } 


    this.navCtrl.push(exerciseSlides, { 
      clickedExercise: exercise, 
      secondExercise: exercise2, 
      thirdExercise: exercise3, 
      fourthExercise: exercise4 
    }); 
} 

Answer 2

stopPropagation() Funktion gibt ungültig, so dass die Linie nicht definiert druckt

console.log(event.stopPropagation()); 

stopPropagation - verhindert eine weitere Ausbreitung des aktuellen Ereignisses in die Erfassung und Bubbling-Phase.

https://developer.mozilla.org/en/docs/Web/API/Event/stopPropagation

So Ereignispropagierung an die Eltern und Großeltern dieses dom Element stoppen stopPropagation wird.

Wenn Sie dieses dom nicht anklickbar machen möchten, müssen Sie den Ereignis-Listener manuell hinzufügen/entfernen.

Sie können click.one Richtlinie implementieren, die Sie so verwenden können:

<h2 (click-once)="handle($event)>Click me once</h2> 


@Directive({ 
    selector: '[click.once]' 
}) 
export class ClickOnce { 
    @Output('click.once') clickOnce = new EventEmitter(); 
    unsubscribe; 

    constructor(private renderer: Renderer, private el: ElementRef) { 
    } 

    ngOnInit() { 
    this.unsubscribe = this.renderer.listen(this.el.nativeElement, 'click', event => { 
     this.unsubscribe(); 
     this.unsubscribe = null; 
     this.clickOnce.emit(event); 
    }); 
    } 


    ngOnDestroy() { 
    if (this.unsubscribe) { 
     this.unsubscribe(); 
    } 
    } 
}