Html 角度6-我如何在该div的外部单击一次div来隐藏该div

我有一个按钮和一个div，当我单击按钮时，div用于切换。但是当我在该div之外单击时，我也需要隐藏div。下面是代码

app.component.html 您可以使用获取文档的单击事件

@HostListener('document:click', ['$event']) onDocumentClick(event) {
  this.show = false;
}

请确保在

clickit（）

函数中添加了

$event.stopPropagation（）

您还应该将

（click）=“$event.stopPropagation（）”

添加到div中。

您可以使用来获取文档的click事件

@HostListener('document:click', ['$event']) onDocumentClick(event) {
  this.show = false;
}

请确保在

clickit（）

函数中添加了

$event.stopPropagation（）

您还应该向div添加

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

。

在div上添加

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

，以获得停止冒泡效果

<div style="border:1px solid;height:200px;width:200px;" *ngIf="show" (click)="$event.stopPropagation()" >Toggle hide and show</div>

在div上添加

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

，以停止冒泡效果

<div style="border:1px solid;height:200px;width:200px;" *ngIf="show" (click)="$event.stopPropagation()" >Toggle hide and show</div>

---

对，但元素在文档中。您如何检查以确保事件的目标不是所讨论的div？$event.stopPropagation（）用于防止触发文档的单击事件。好的，确定。单击div的内部也会关闭它。目标是仅在单击div外部时关闭。您可以使用DOM方法，如

Element.closest（）

或

Element.contains（）

来检查单击目标是div还是div内部，以避免在单击时关闭它。将

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

添加到div。这肯定有效。你应该更新你的问题来说明这一点。你得到了我的支持。对，但元素在文档中。您如何检查以确保事件的目标不是所讨论的div？$event.stopPropagation（）用于防止触发文档的单击事件。好的，确定。单击div的内部也会关闭它。目标是仅在单击div外部时关闭。您可以使用DOM方法，如

Element.closest（）

或

Element.contains（）

来检查单击目标是div还是div内部，以避免在单击时关闭它。将

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

添加到div。这肯定有效。你应该更新你的问题来说明这一点。你得到了我的支持。对，但元素在文档中。您如何检查以确保事件的目标不是所讨论的div？@AlexanderStaroselsky要获得停止冒泡效果，我们需要应用停止传播。谢谢，我有UpdateRight，但元素在文档中。您如何检查以确保事件的目标不是所讨论的div？@AlexanderStaroselsky要获得停止冒泡效果，我们需要应用停止传播。谢谢，我已经更新了

 import { Component , HostListener} from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})

export class AppComponent {
  name: string = '2019-01-01T23-00-11';
  //name: string = '2019-01-01';
  show:any;

  @HostListener('document:click', ['$event'])

    clickout() {
     this.show = false;
    }




  ngOnInit() {

  }
    clickit(){
    this.show = !this.show;
    }
}