Html 将不同的图标单击到已具有单击事件的div中

我对可点击的div有问题

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

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

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

问题是，如果我将事件单击附加到父div，这将取消子图标的其他事件。因此，当单击下载或播放图标时，它总是播放音频，因为我实际上是在单击父div

这是我的代码：

<div class="audioItem" ion-item *ngFor="let audio of audios" (click)="tryToPlay(audio)">
            <img id="leftIcon" src="img/audio-magenta@300x.svg">
            <h3>{{ audio.name }}</h3>
            <div *ngIf="audio.downloaded">
                <img class="downloadIcon" src="img/download-onclick@300x.svg" (click)="clicked(audio)">
            </div>
            <div *ngIf="!audio.downloaded">
                <img class="downloadIcon" src="img/download@300x.svg" (click)="clicked(audio)">
            </div>
            <div id="play" *ngIf="!audio.locked">
                <img id="arrowIcon" src="img/play@300x.svg" (click)="tryToPlay(audio)">
            </div>
            <div *ngIf="audio.locked">
                <img id="lockIcon" src="img/ui-lock100.png" (click)="tryToPlay(audio)">
            </div>
</div>

{{audio.name}

请注意，clicked（）方法仅用于测试某些内容，这里它将是任何其他“download（）”方法。这里重要的是要知道如何允许单击子图标。

我解决了这个问题：

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

---

您还可以使用

event.stopPropagation（）解决此问题

请看一看

正如您在这里看到的，您还可以将
$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>

我不知道这件事。我通过使用css应用相对和绝对位置解决了这个问题，这是一个更加牵强的问题，正如我在下面的回答中所说的。。。但我认为你解决这个问题的方法要好得多，非常感谢！！听到这个消息很高兴！：）
<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);
  }