离子2-停止点击事件

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

，但它将执行，并且console.log(event.stopPropagation());不确定。

基本上我想做的是，完成练习时，不应再单击(不再导航到下一页(。我该如何解决？

和target日志说<div class="overlay">我不知道这是否引起了问题？

Answer 1

我有一些假设。

first ，您说

target日志说 <div class="overlay">

我认为您单击了该元素。如果您单击了一个<img>标签，则target将打印<img>

第二，我不知道为什么使用event.stopPropagation()。它用于称为事件冒泡的机制。当我们从文档中阅读时。

当事件发生在元素上时，它首先在其父母上运行处理程序，然后在其父母上运行其他祖先。

因此，您的event.stopPropagation()将停止将事件传播给元素的父母。如果您只想停止在此处调用该功能的调用，则可以简单地执行此操作：

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

但是，如果您只想停止循环，则可以这样做：

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

停止propagation-防止当前事件的进一步传播 捕获和冒泡的阶段。

https://developer.mozilla.org/en/docs/web/api/event/stoppropagation

因此，停止流传将停止事件传播给这个dom元素的父母和祖父。

如果要使此DOM无法单击，则需要手动添加/删除事件侦听器。

您可以实现单击。一个指令，您可以使用这样的指令：

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