我有一個只有 html css 沒有引導程式或其他插件的模式彈出視窗。我需要使用 angular 在外部單擊時關閉彈出視窗。請注意，一旦彈出視窗打開，背景將變灰，我們無法單擊彈出視窗之外的任何內容。此彈出視窗位于整個頁面容器內。我試過這個，但沒有用。如何使用主機偵聽器檢測外部點擊
uj5u.com熱心網友回復：
您可以在主 div 上使用模糊事件
<div id="main" (blur)="dropFunction()" ngIf="showMainDiv">
...
</div>
dropFunction(){
this.showMainDiv = false; // same logic to enable backdrop also
}
uj5u.com熱心網友回復：
您可以使用視窗 onclick 事件 & 在其中，您可以檢查目標是否是您的模態
var modal = document.getElementById("myModal");
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}您可以使用以下與 angular 視窗 onclick 事件相對應的代碼
@HostListener('document:click', ['$event'])
onDocumentClick(event: MouseEvent) {
console.log(event.target)
}uj5u.com熱心網友回復：
我將假設模態容器上添加了一個類。
<div class="app-modal-container">
// your modal content here
</div>
然后我們將在檔案級別監聽點擊事件，
@HostListener('document:click')
click($event: Event) {
}
然后來自模態內部的任何點擊都將具有divwith 類app-modal-container。
使用composedPath()on 方法$event獲取路徑，遍歷路徑中的所有元素，并檢查是否存在所需的 div。如果不是，點擊在外面。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/320984.html
下一篇：我無法讀取影像。它顯示以下錯誤