关闭当前对话框的事件侦听器

Question

以下代码仅适用于第一个对话框 (BOB JONES)，第二个对话框 (ROBERT ABREAU) 将打开但不会关闭对话框外的 onclick。我将有 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();}
 });
}

Answer 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 -->

JS

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

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

关闭当前对话框的事件侦听器

event listener to close current dialog

javascript

dialog

html

JS