Question

我有一个可点击的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/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>

请注意，clicked（）方法仅用于测试，在这里它将是任何其他＆＃34; download（）＆＃34;方法。这里重要的是知道如何允许点击子图标。

Answer 1

我解决了它：

<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>

的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%;
}

Answer 2

您也可以使用public int getFullCosts () { int initialCosts = 10; int currentCount = 3; int fullCosts = 0; for (int i = 1; i <= currentCount; i++) { fullCosts += i * initialCosts; } return fullCosts; }解决此问题。

请查看this plunker。

就像你可以看到的那样，你也可以将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>

单击不同的图标到已经有点击事件的div

2 个答案: