如何防止<dialog>用Esc键关闭

Question

根据文档

，当您按下 

<dialog>

 键 

时，HTML 元素 Esc 将始终关闭。问题是您可能希望它不立即关闭，即如果您需要要求用户确认等。

出于测试目的，假设我们有一个变量

preventClosing

，它将确定我们是否希望用户能够使用

Esc

按钮关闭对话框。

dialog

提供了

cancel

事件，确实取消了对话框关闭，但只是第一次； 如果按 Esc 两次，它将关闭，无论

event.preventDefault()

调用如何，您可以在以下代码片段上进行测试。

const preventClosing = true;
const button = document.querySelector('button');
const dialog = document.querySelector('dialog');

button.addEventListener('click', () => {
    dialog.showModal();
});

dialog.addEventListener('cancel', (event) => {
    if (preventClosing) {
        event.preventDefault();
    }
});

<button>Open modal</button>
<dialog>A dialog I don't want to close with Esc</dialog>

Answer 1

因此，实际解决此问题的方法不是使用

cancel

事件，而是使用

keydown

，如下所示：

const preventClosing = true;
const button = document.querySelector('button');
const dialog = document.querySelector('dialog');

button.addEventListener('click', () => {
    dialog.showModal();
});

dialog.addEventListener('keydown', (event) => {
    if (event.key === 'Escape' && preventClosing) {
        event.preventDefault();
    }
});

<button>Open modal</button>
<dialog>A dialog I don't want to close with Esc</dialog>

正如您现在所看到的，无论您按多少次

Esc

，它实际上都不会关闭。