写真やズーム - （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()