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

我有一些假设。

首先，你说

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

我认为你点击了那个元素。如果您点击了一个<img>标记target将打印<img>

第二次，我不知道您使用event.stopPropagation()的原因。它用于名为 Event Bubbling 的机制中。正如我们从文档中读到的那样。

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

因此，您的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，因此该行将打印undefined

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

离子2 - 停止点击事件

2 个答案: