在使用onClick()之前,如何保持onClickOutside()方法为禁用状态?

时间:2019-02-08 18:23:24

标签: javascript angular typescript onclick

当我使用事件监听器单击元素时,我应该显示我的弹出窗口,在我介绍onClickOutside()之前,它的工作原理还不错。使用ng-click-outside

export class Component {
  private isPopupDisplayed: boolean = false;

  onClick() {
    console.log('Clicked');
    this.isPopupDisplayed = true;
  }
  
  onClickedOutside(event) {
    this.isPopupDisplayed = false;
  }
  
}  
.popup{
  position: absolute;
  z-index: 3;
  width: 200px;
  height: 94px;
  background-color: $secondary-color;
  left: 0%;
  bottom: 0%;
  padding: 15px 0px;
  margin: 12px;
  border: 1px solid $modal-border-color;
  border-radius: 4px;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25);

  li:hover {
    background-color: $accent-color;
  }

  li {
    padding-top: 5px;
    height: 32px;
  }
}
<div *ngIf="isPopupDisplayed" >
        <ul class="popup" (clickOutside)="onClickedOutside($event)">
            <li><a>My Details</a></li>
            <li><a>Sign out</a></li>
        </ul> 
    </div>

    <div class="presenter-menu_avatar" (click)="onClick()" >
        <img [src]="avatarUrl">
    </div>

当我尝试引入onClickOutside()方法时,我可以看到这两种方法是同时触发的,因为我的弹出窗口仍然不存在,并且自动触发甚至没有显示它。

我的目的是仅在onClick()时显示弹出窗口,而在其外部单击时将其隐藏。

1 个答案:

答案 0 :(得分:1)

在点击功能中添加stopPropagation事件

  onClick(event) {
    event.stopPropagation()
    console.log('Clicked');
    this.isPopupDisplayed = true;
  }




<div class="presenter-menu_avatar" (click)="onClick($event)" >
    <img [src]="avatarUrl">
</div>