Javascript 防止在单击时关闭对话框

这是我的对话

<div *ngIf="visible" class="overlay" (click)="close()">
    <div role="dialog" class="overlay-content">
        <div class="modal-dialog" (click)="$event.stopPropagation()">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" (click)="close()" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Confirmation</h4>
                </div>
                <div class="modal-body">
                    <ng-content></ng-content>
                </div>
                <div class="modal-footer footer-buttons">
                    <button type="button" class="btn btn-default" (click)="confirm()">OK</button>
                    <button type="button" class="btn btn-default" (click)="close()">Cancel</button>
                </div>
            </div>
        </div>
    </div>
</div>

&时代；
确认书
好啊
取消

---

正如您可能看到的，大多数上div都有

（单击）=“close（）”

，当在对话框外部单击时，对话框将关闭，因为下一个div有

（单击）=“$event.stopPropagation（）”

，当在对话框内部单击时，它将停止，但此解决方案是错误的。问题是，如果我在对话框中放置了任何选项卡，那么更改选项卡将不起作用，因为

（单击）=“$event.stopPropagation（）

。有人知道更好的解决方案吗？换句话说，如何在对话框外部单击关闭对话框，但在内部单击时保持其打开？

我猜您正在寻找一个指令，该指令将侦听对话框外部的单击。 以下是我的版本：

@Directive({
    selector: '[clickOutside]'
})
export class ClickOutsideDirective {
    constructor(private elementRef: ElementRef) {
    }

    @Output()
    clickOutside = new EventEmitter<Event>();

    @HostListener('document:click', ['$event', '$event.target'])
    onClick(event: MouseEvent, targetElement: HTMLElement): void {
        if (!targetElement) {
            return;
        }

        const clickedInside = this.elementRef.nativeElement.contains(targetElement);
        if (!clickedInside) {
            this.clickOutside.emit(event);
        }
    }
}

@指令({
选择器：“[单击外部]”
})
导出类ClickOutside指令{
构造函数（私有elementRef:elementRef）{
}
@输出（）
单击外部=新建EventEmitter（）；
@HostListener（'文档：单击'，['$event'，'$event.target']））
onClick（事件：MouseEvent，targetElement:HTMLElement）：void{
如果（！targetElement）{
返回；
}
const clickedInside=this.elementRef.nativeElement.contains（targetElement）；
如果（！clickedInside）{
点击outside.emit（事件）；
}
}
}

并按如下方式使用：

<div *ngIf="visible" class="overlay" (clickOutside)="visible=false">
....

....

---

一个选项是不嵌套覆盖和覆盖内容

例如：

<div class="overlay"></div>
<div class="overlay-content">/* Content */</div>

---

codepen:

或者它立即打开和关闭，targetElement为td，clickedInside为false，刷新后只工作一次。下面是一个演示：

.overlay {
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 5;
background-color: rgba(0,0,0,.6);
}

.overlay-content {
background: white;
position: fixed;
width: 50%;
height: 50%;
margin-left: 25%;
margin-top: 5%;
z-index: 10;
}