Фото и масштаб - нажмите вне фотографию, чтобы уменьшить (angular2)

Question

HTML

<div class="zoomPhoto" *ngIf="zoomed" (click)="unZoomPhoto()"> 
    <img src="{{currentPhoto}}" [style.margin-left.px]="-(zoomedPhotoWidth/2)" [style.margin-top.px]="-(zoomedPhotoHeight/2)" #photo /> 
</div> 

CSS

.zoomPhoto{ 
    background: rgba(0, 0, 0, 0.8); 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    z-index: 9998; 
} 
.zoomPhoto img{ 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    z-index: 9999; 
} 

Ну, мы имеем ситуацию, когда пользователь видит наведена фото. Я бы хотел уменьшить масштаб, когда нажимаю снаружи, и это работает, но проблема такая же, когда я нажимаю на фотографию.

Я понимаю, что фото находится внутри класса zoomPhoto, и причина в том, что поведение такое же.

Как это сделать, когда я нажимаю на фотографию, ничего не происходит?

Answer 1

В основном событие в javascript пузыри вверх и если есть какой-либо обработчик событий для этого события на каком-то верхнем уровне, это называется, что происходит в вашем случае. так что вам просто нужно остановить пузырь. Вы можете добиться этого, используя stopPropogation. создайте обработчик для клика по изображению, затем вызовите stopPropogation для этого события.

<img src="{{currentPhoto}}" [style.margin-left.px]="-(zoomedPhotoWidth/2)" [style.margin-top.px]="-(zoomedPhotoHeight/2)" #photo (click)="PhotoClicked($event) /> 

затем, в вашем классе компонентов

PhotoClicked(event): 
     event.stopPropogation()