如果click在具体的DOM元素之外,我使用下面的指令来检测和隐藏块:
import {
Directive,
ElementRef,
Output,
EventEmitter,
HostListener
} from "@angular/core";
@Directive({
selector: "[clickOutside]"
})
export class ClickOutsideDirective {
constructor(private _elementRef: ElementRef) {}
@Output()
public clickOutside = new EventEmitter();
@HostListener("document:click", ["$event.target"])
public onClick(targetElement) {
const clickedInside = this._elementRef.nativeElement.contains(
targetElement
);
this.clickOutside.emit(clickedInside);
}
}
我已将此指令应用于元素:
<div class="action" (click)="open()">Open</div>
<div
class="search_content"
*ngIf="_searchContentOpen"
clickOutside
(clickOutside)="clickOutside($event)"
></div>
部件代码为:
open(): void {
this._searchContentOpen = !this._searchContentOpen;
}
问题是当我调用click时,我设置了< code >这个。_searchContentOpen设置为真/假。
视情况而定,我在应用指令的地方显示块。但是当ngIF工作时,指令也总是同步工作。所以结果块永远不会显示。
如何修复它?
以下是我的两个选择:
1)在触发器上使用event.stop传播()
<div class="action" (click)="open(); $event.stopPropagation()">Open</div>
2) 仅在应用指令后处理点击
@Directive({
selector: '[clickOutside]'
})
export class ClickOutsideDirective implements OnInit {
@Output() clickOutside = new EventEmitter();
captured = false;
constructor(private elRef: ElementRef) { }
@HostListener('document:click', ['$event.target'])
onClick(target) {
if (!this.captured) {
return;
}
if (!this.elRef.nativeElement.contains(target)) {
this.clickOutside.emit();
};
}
ngOnInit() {
fromEvent(document, 'click', { capture: true }).pipe(take(1))
.subscribe(() => this.captured = true);
/* or
document.addEventListener('click', () => this.captured = true, {
capture: true,
once: true
});
*/
}
}
Ng-run示例
问题内容: 如何检测元素外部的点击?我正在使用Vue.js,因此它将不在我的模板元素之外。我知道如何在Vanilla JS中做到这一点,但是当我使用Vue.js时,我不确定是否有更合适的方法来做到这一点? 我想我可以使用更好的方法来访问元素? 问题答案: 只需设置一次自定义指令即可很好地解决: 用法: 在组件中:
问题内容: 我正在寻找一种检测点击事件是否在组件外部发生的方法。jQuery最近的()用于查看click事件中的目标是否具有dom元素作为其父元素之一。如果存在匹配项,则单击事件属于子项之一,因此不被视为在组件之外。 因此,在我的组件中,我想将单击处理程序附加到窗口。当处理程序触发时,我需要将目标与组件的dom子代进行比较。 click事件包含“path”之类的属性,该属性似乎包含事件经过的dom
问题内容: 我有一个id为“ content- area”的div,当用户在该div之外单击时,我想提醒他们他们在该div之外单击的事实。我将如何使用JavaScript解决此问题? 问题答案: 用纯Javascript 看看这个小提琴,看看这就是你所追求的!
问题内容: 我有一些HTML菜单,当用户单击这些菜单的标题时,它们会完整显示。当用户在菜单区域之外单击时,我想隐藏这些元素。 jQuery可能会发生这种情况吗? 问题答案: 注意:应该避免使用,因为它会破坏DOM中的正常事件流。有关更多信息,请参见本文。考虑使用这种方法,而不是 将单击事件附加到关闭窗口的文档主体。将单独的click事件附加到容器,以停止传播到文档主体。
我从这个问题中找到了一个关于检测div外部点击的好答案:我如何检测元素外部的点击?,这工作得非常好。 但我注意到,在测试我的站点时,如果我点击元素外部,它在iPhone上不起作用。 下面是代码(直接取自该答案)