【问题标题】：event listener to close current dialog关闭当前对话框的事件监听器
【发布时间】：2021-10-03 06:12:26
【问题描述】：

以下代码仅适用于第一个对话框 (BOB JONES)，第二个对话框 (ROBERT ABREAU) 将打开但不会关闭对话框外的点击。我将有 150 多个与国际象棋大师的学生照片相关的文本对话。所以 IDK 如果我可以按照 closeDialog() 使用事件侦听器来关闭当前打开的对话框。也许解决方案将涉及 getElementsByClassName。我可以将其修补到下面的 js 代码中，并在每个对话框中省略“onclick =”closeDialog();”。

什么是好的计划？

html

<!-- BOB JONES -->
<dialog id = "B-JONES" onclick = "closeDialog('B-JONES');">
<div class="test">
<p>Blah blah blah</p>
</div>
</dialog>
<!-- END BOB JONES

<!-- ROBERT ABREAU -->
<dialog id = "R-ABREAU" onclick = "closeDialog('R-ABREAU');">
<div class="test">
<p>Blah blah blah</p>
</div>
</dialog>
<!-- END ROBERT ABREAU -->

...还有 150 个

JS

function closeDialog(dialogID) {
 document.querySelector('dialog').addEventListener('click', function(e) {
if(!e.target.closest('div')) { e.target.close();}
 });
}

【问题讨论】：

为什么不提供一个关闭对话框的通用函数，然后将对话框的 ID 传递给它？这样它将在特定对话框上触发。
为什么，是的！这正是我要找的！

标签： javascript dialog

【解决方案1】：

根据您的评论，您要查找的代码可能位于以下位置：

<!-- BOB JONES -->
<dialog id = "B-JONES" onclick = "closeDialog('B-JONES');">
<div class="test">
<p>Blah blah blah</p>
</div>
</dialog>
<!-- END BOB JONES

<!-- ROBERT ABREAU -->
<dialog id = "R-ABREAU" onclick = "closeDialog('R-ABREAU');">
<div class="test">
<p>Blah blah blah</p>
</div>
</dialog>
<!-- END ROBERT ABREAU -->

 function closeDialog(dialogID) {
 let dialog = document.getElementById(dialogId);
 if (dialog) {
      dialog.close();
 }
}

只需确保对话框的 ID 是唯一的。

【讨论】：