照片和變焦 - 點擊之外的照片，以縮小（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()