Нажмите разные значки в div, в котором уже есть событие click

У меня проблема с интерактивным div.Нажмите разные значки в div, в котором уже есть событие click

Это звуковое приложение Ionic 2. И у меня есть список разделов с разными значками в них.

Более точно, каждый 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, в котором уже есть событие click

ответ

Смежные вопросы