英文:
How to hide an html element when clicked outside
问题
我想知道一种方法，当点击HTML元素外部时（在我的情况下是），工具提示应该隐藏。我不想使用'ng-clicked-outisde'库。
是否有一种方法可以实现这一点。
这是我的代码链接：https://stackblitz.com/edit/angular-b61t71
谢谢。
英文:
I want to know a way in which when clicked outside an html element(in my case <span>, please see my code), the tooltip should hide. I don't want to use 'ng-clicked-outisde' library.
Is there a way in which we can achieve it.
Here is the link of my code: https://stackblitz.com/edit/angular-b61t71
Thank You.
答案1
得分: 2
你可以像这样使用 HostListener 和 ViewChild：
@ViewChild('tooltip') tooltip: ElementRef;
@HostListener('document:click', ['$event'])
clickout(event) {
if (this.tooltip) {
if (!this.tooltip.nativeElement.contains(event.target)) {
this.clickHover = false;
}
}
}
并且更新 HTML 文件：
<div #tooltip class="tooltip" (click)="clickHover = true">点击我！
<span [style.display]="clickHover ? 'block' : 'none'" class="tooltiptext">提示文本</span>
</div>
英文:
You can use HostListener and ViewChild like this
@ViewChild('tooltip') tooltip: ElementRef;
@HostListener('document:click', ['$event'])
clickout(event) {
if (this.tooltip) {
if (!this.tooltip.nativeElement.contains(event.target)) {
this.clickHover = false;
}
}
}
and update html file
<div #tooltip class="tooltip" (click)="clickHover = true">Click me!
<span [style.display]="clickHover ? 'block':'none'" class="tooltiptext">Tooltip text</span>
</div>
答案2
得分: 1
在 .html 文件中，您可以添加一个类似这样的叠加层：
<div class="overlay" *ngIf="clickHover" (click)="clickHover = false"></div>
<div class="tooltip" (click)="clickHover = true">点击我！
<span *ngIf="clickHover" class="tooltiptext">工具提示文本</span>
</div>
在 .css 文件中：
.overlay {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
}
英文:
Maybe you could add an overlay like this :
In .html :
<div class="overlay" *ngIf="clickHover" (click)="clickHover = false"></div>
<div class="tooltip" (click)="clickHover = true">Click me!
<span *ngIf="clickHover" class="tooltiptext">Tooltip text</span>
</div>
in .css :
.overlay {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
}
答案3
得分: 0
在您的组件的根元素上绑定事件，或在文档元素上绑定事件，或在文档的包装器上绑定事件，并处理以下情况：
- 单击您的元素
- 单击其他元素
英文:
Bind event on a root element of your component or on document element or on the wrapper of your document and handle cases:
- click on your element
- click on other elements
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论