Question

我正在html中使用对话框标签，如果关闭对话框，如果通过输入ESC关闭对话框，我想知道。

我说的是html对话框，而不是jquery的对话框。

Answer 1

您可以在javascript中识别关键事件。您可以执行以下操作：

$(document).keyup(function(e) {
  if (e.keyCode === 27) { // do something };
});

KeyCode 27正在逃脱。

Answer 2

当对话框的打开属性使用MutationObserver更改时，您可以触发事件。代码源自Mats回复firing event on DOM attribute change

window.MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;


var dialog = document.querySelector('dialog');
var btn = document.querySelector('#open-dialog');

var observer = new MutationObserver(onDialogMutation);

btn.addEventListener('click', function() {

  dialog.showModal();
  observer.observe(dialog, {
    attributes: true
  });
});

function onDialogMutation(mutation) {

  observer.disconnect();
  console.log('Dialog Closed');
}

<!doctype html>
<html lang="en">

<head>
  <title>Dialog MutationObserver</title>
</head>

<body>
  <dialog>My Dialog</dialog>
  <input id="open-dialog" type="button" value="open dialog" />
</body>

</html>

html对话框 - 如何知道对话框是否已通过转义关闭

2 个答案: