- ここでは、クリックイベント

Question

を停止するには、私の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> 

私はこのような機能を持っている：

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 
    }); 
} 

をしかし、それはSTIL実行され、console.log(event.stopPropagation());は未定義です。

基本的に私がやりたいことは、エクササイズが行われたときに、クリック可能ではなく（次のページに移動しないようにする）ということです。どうすればこの問題を解決できますか？

ログには、<div class="overlay">というログが表示されます。これが問題の原因になっているかどうかわかりません。

Answer 1

私はいくつかの前提を持っています。

まず、あなたが

targetと言うログが<div class="overlay">

は、私はあなたがその要素をクリックしたと思うと述べています。あなたはtargetが<img>

セカンドを印刷していた1個の<img>タグをクリックした場合は、event.stopPropagation()を使用する理由、私は知りません。 イベントバブリングというメカニズムで使用されています。私たちはドキュメントから読みました。

要素でイベントが発生すると、最初にハンドラが実行され、次に親プロセスが実行され、次に他の祖先プロセスが実行されます。

あなたのevent.stopPropagation()は、イベントをその要素の親に広げなくなります。あなたがちょうどそこに関数の呼び出しを停止したい場合は、単にこれを行うことができます。

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

をしかし、あなただけのforループを停止したい場合は、このようにそれを行うことができます。

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

を

@edit フル例：

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（）関数voidを返すので、線は不定

を印刷します

console.log(event.stopPropagation()); 

のstopPropagationは - キャプチャおよびバブリング段階で現在のイベントのさらなる伝播を防ぎ。

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

そうのstopPropagationは両親と、このDOM要素の壮大な親にイベントの伝播を停止します。

このdomをクリックできないようにするには、イベントリスナーを手動で追加/削除する必要があります。

あなたは、あなたがそのように使用することができますclick.oneディレクティブを実装することができます

<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(); 
    } 
    } 
}