Having an issue with a clickable div element.
Working on an Ionic 2 audio application where I have a series of divs each containing different icons.
Specifically, each div has two icons - one for downloading the audio and the other for playing it.
I want to be able to click on each icon and have the appropriate action take place. However, if I click on any other part of the div besides the icons, it should default to playing the audio.
The problem arises when I attach the click event to the parent div, as it then overrides the events of the child icons. This results in the audio playing every time I click on the download or play icon, even though I intended to click on the parent div.
Below is the code snippet:
<div class="audioItem" ion-item *ngFor="let audio of audios" (click)="tryToPlay(audio)">
<img id="leftIcon" src="img/audio-icon.png">
<h3>{{ audio.name }}</h3>
<div *ngIf="audio.downloaded">
<img class="downloadIcon" src="img/download-icon.png" (click)="clicked(audio)">
</div>
<div *ngIf="!audio.downloaded">
<img class="downloadIcon" src="img/not-downloaded-icon.png" (click)="clicked(audio)">
</div>
<div id="play" *ngIf="!audio.locked">
<img id="arrowIcon" src="img/play-icon.png" (click)="tryToPlay(audio)">
</div>
<div *ngIf="audio.locked">
<img id="lockIcon" src="img/lock-icon.png" (click)="tryToPlay(audio)">
</div>
</div>
Keep in mind that the clicked() method is just for testing purposes, it could be any other method like "download()". The main focus is on enabling the click events for the child icons.