单击不同的图标中，该图标已经有一个点击事件

Question

我有一个可点击div的问题

这是一个离子2音频应用程序。我有一个带有不同图标的Div列表。

更确切地说，每个Div包含可以单击的两个图标，一个用于下载音频，另一个可以播放。

我需要单击每个图标，对每个图标执行适当的行为，但是当单击"包含Div的任何其他部分"时，它必须具有与播放按钮相同的行为，以便它播放音频。

问题是，如果我将事件连接到父级，这会取消孩子图标的其他事件。因此，单击下载或播放图标时，它总是播放音频，因为我真的点击了父级

这是我的代码：

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

请注意，clicked（）方法仅用于测试，这将是任何其他"下载（）"方法。重要的是要知道如何允许单击孩子图标。

Answer 1

您也可以使用event.stopPropagation();。

解决此问题。

请看一下这个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);
  }

Answer 2

我解决了：

<ion-list>
        <div class="audioContainer" *ngFor="let audio of audios">
            <div class="audioItem" ion-item (click)="tryToPlay(audio)">
                <img id="leftIcon" src="img/[e-mail]">
                <h3>{{ audio.name }}</h3>
            </div>
            <div *ngIf="audio.downloaded">
                <img class="downloadIcon" src="img/[e-mail]" (click)="clicked(audio)">
            </div>
            <div *ngIf="!audio.downloaded">
                <img class="downloadIcon" src="img/[e-mail]" (click)="clicked(audio)">
            </div>
            <div id="play" *ngIf="!audio.locked">
                <img id="arrowIcon" src="img/[e-mail]" (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%;
}