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

照片和缩放 - 点击外面的照片缩小（angular2）

1 个答案: