離子2 - 停止click事件

這裏是我的html：離子2 - 停止click事件

<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());是不確定的。

當練習完成它不應該是點擊（不導航到下一頁）了，所以基本上是我想要做的是。我怎樣才能解決這個問題？？

而target日誌說<div class="overlay">我不知道這是否導致問題？

來源

2017-05-05 Sreinieren

我有一些假設。

首先，你說

target日誌說，<div class="overlay">

我想你點擊的元素。如果你點擊了一個<img>標籤target將印有<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 
    }); 
}

來源

2017-05-05 23:37:18 Humberd

感謝您的解釋，但現在所有的卡都沒有執行的功能。我怎樣才能寫出一個if語句只返回完成的練習？ – Sreinieren

當我使用return – Sreinieren

那麼，我不明白你的意思，但我認爲這可能是這個問題：'if（this.exerciseIsDone [i]）{return; }'嘗試刪除'.done'，因爲從名稱'excersiceIsDone [i]'我假設它是一個布爾值數組。我可能是錯的，但我不能幫你沒有完整的上下文 – Humberd

stopPropagation（）函數返回空隙，所以該線將打印未定義

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

來源

2017-05-05 23:51:43

離子2 - 停止click事件

回答

相關問題