Question

我试图仅在单击时打开元素，但每次单击时才关闭元素，即使打开一次弹出窗口后，关闭函数（ ClickedOut（event））也会触发元素已经关闭。

单击弹出框将打开的任何框，然后在弹出框关闭的任何位置单击，而目标是在单击框时打开弹出框，仅当在弹出框之外单击弹出框时，才应将其关闭。

https://stackblitz.com/edit/angular-7edvms?file=src/app/app.component.ts

<div (click)="ClickedOut($event)">

<div class="box1" (mouseenter)="addClickEvent($event)" 
(mouseleave)="addClickEvent($event)" (click)="addClickEvent($event)">
 On click
</div>

<div class="box2" (mouseenter)="addClickEvent($event)" 
(mouseleave)="addClickEvent($event)" (click)="addClickEvent($event)">
 On click
</div>


<fs-modal *ngIf="opened" [ngStyle]="modalStyleClikedFlag ? modelClickedStyle 
:modelStyle" (mouseleave)="onPopEvent($event)">
</fs-modal>

</div>

TS文件

export class AppComponent {
  modelStyle: any = {
    display: 'none'
  };
  modelClickedStyle: any = {
    display: 'none'
  };

  modalStyleClikedFlag;
  opened;

addClickEvent(e) {
    let x = e.currentTarget.getBoundingClientRect();
 if (e.type === 'click') {
    this.modalStyleClikedFlag = true;
    this.modelClickedStyle = {
    top: 0 + 'px',
    left: 0 + 'px',
    height: 900 + 'px',
    width: 90 + '%',
    display: 'block'
   };
    this.opened = false;
   }
else if (e.type === 'mouseenter') {
    this.opened = true;
    this.modalStyleClikedFlag = false;
    if(((window.innerWidth || document.documentElement.clientWidth) - 
    x.right) >200 ){
    this.modelStyle = {
            top: 0 + 'px',
            left: x.right + 'px',
            height: screen.height + 'px',
            width: 65 +'%',
            display: 'flex'
            };
            }else{
            this.modelStyle = {
            top: 0 + 'px',
            right : ((window.innerWidth||document.documentElement.clientWidth)
           - x.left)
             + 'px',
            height: screen.height + 'px',
            width: 65 +'%',
            display: 'flex'
            };

        }
}
else if (e.type === 'mouseleave' && e.clientX < x.right) {
  this.modelStyle = {
    display: 'none'
  };
}
}

onPopEvent() {
  this.modelStyle = {
   display: 'none'
 };
}

ClickedOut(event): void {
  event.preventDefault();
  this.opened = !this.opened
  }

 }

Answer 1

这是因为孩子总是会从父母那里得到click事件：这被称为事件冒泡，您可以找到几种在线停止事件的方法。

您可以采取哪些预防措施：

<fs-modal *ngIf="opened" (click)="$event.stopPropagation()" ... >

单击事件功能在整个文档上触发

1 个答案: