點擊不同的圖標到它已經有一個點擊事件的div

這是一個Ionic 2音頻應用程序。我有一個列表中有不同圖標的div。

更確切地說，每個div包含兩個可以單擊的圖標，一個可以下載音頻，另一個可以播放。

我需要點擊每個圖標，爲每個圖標執行適當的行爲，但是當點擊包含div的任何其他部分時，它必須具有與播放按鈕相同的行爲，以便它播放音頻。

問題是，如果我附加事件點擊父母的div，這取消了我兒童圖標的其他事件。所以當點擊下載或播放圖標時，它總是播放音頻，因爲我確實點擊了父div。

這是我的代碼：

<div class="audioItem" ion-item *ngFor="let audio of audios" (click)="tryToPlay(audio)"> 
      <img id="leftIcon" src="img/[email protected]"> 
      <h3>{{ audio.name }}</h3> 
      <div *ngIf="audio.downloaded"> 
       <img class="downloadIcon" src="img/[email protected]" (click)="clicked(audio)"> 
      </div> 
      <div *ngIf="!audio.downloaded"> 
       <img class="downloadIcon" src="img/[email protected]" (click)="clicked(audio)"> 
      </div> 
      <div id="play" *ngIf="!audio.locked"> 
       <img id="arrowIcon" src="img/[email protected]" (click)="tryToPlay(audio)"> 
      </div> 
      <div *ngIf="audio.locked"> 
       <img id="lockIcon" src="img/ui-lock100.png" (click)="tryToPlay(audio)"> 
      </div> 
</div>

注意，點擊（）方法僅適用於測試的東西，這將是任何其他的「下載（）」方法。這裏重要的是知道如何允許點擊兒童圖標。

來源

2017-02-22 Ivan Lencina

您也可以通過使用event.stopPropagation();解決這個問題。請致電this plunker。

就像你可以看到，你也可以發送$event對象這兩種方法

<ion-list> 
    <ion-item *ngFor="let item of items" (click)="open($event, item)"> 
     {{ item }} 
     <ion-icon (click)="download($event, item)" item-right name="download"></ion-icon> 
    </ion-item> 
</ion-list>

，然後使用該信息來阻止事件的傳播，因此，只有正確的方法將被執行

public open(event, item) { 
    event.stopPropagation(); 
    alert('Open ' + item); 
    } 

    public download(event, item) { 
    event.stopPropagation(); 
    alert('Download ' + item); 
    }

來源

2017-02-25 10:13:00 sebaferreras

我不知道這件事。我通過應用css的相對和絕對位置解決了這個問題，這是一個非常牽強的問題，正如我在下面的自己的答案中所說的......但我認爲你的解決方法要好得多，非常感謝！ –

很高興聽到！ :) – sebaferreras

我解決了它：

<ion-list> 
     <div class="audioContainer" *ngFor="let audio of audios"> 
      <div class="audioItem" ion-item (click)="tryToPlay(audio)"> 
       <img id="leftIcon" src="img/[email protected]"> 
       <h3>{{ audio.name }}</h3> 
      </div> 
      <div *ngIf="audio.downloaded"> 
       <img class="downloadIcon" src="img/[email protected]" (click)="clicked(audio)"> 
      </div> 
      <div *ngIf="!audio.downloaded"> 
       <img class="downloadIcon" src="img/[email protected]" (click)="clicked(audio)"> 
      </div> 
      <div id="play" *ngIf="!audio.locked"> 
       <img id="arrowIcon" src="img/[email protected]" (click)="tryToPlay(audio)"> 
      </div> 
      <div *ngIf="audio.locked"> 
       <img id="lockIcon" src="img/ui-lock100.png" (click)="tryToPlay(audio)"> 
      </div> 
     </div> 
</ion-list>

的CSS：

.audioContainer { 
    position: relative; 
} 

ion-list .audioItem { 
    position: relative; 
    color: #fff !important; 
    margin-bottom: .1em !important; 
    padding-top: .5em !important; 
    padding-bottom: .5em !important; 
} 

ion-list .audioItem img#leftIcon { 
    width: 9% !important; 
    float: left; 
    margin-right: 0; 
} 

ion-list img#arrowIcon { 
    position: absolute; 
    right: 4%; 
    bottom: 22%; 
    width: 10%; 
} 
ion-list img#lockIcon { 
    position: absolute; 
    right: 1.3em; 
    bottom: 1.6em; 
    width: 3%; 
} 

ion-list img.downloadIcon { 
    position: absolute; 
    width: 10%; 
    right: 15%; 
    bottom: 22%; 
}

來源

2017-02-22 17:59:29

點擊不同的圖標到它已經有一個點擊事件的div

回答

相關問題