HTMLDialogElement: cancel イベント

cancel イベントは、ユーザーが現在開いているダイアログを閉じたいと操作したときに <dialog> に発生します。例えば、ユーザーがブラウザーの UI の中で Esc キーを押したり、「ダイアログを閉じる」ボタンをクリックしたりしたときにブラウザーがこのイベントを発生させることがあります。

バブリング なし
キャンセル 可
インターフェイス Event
イベントハンドラープロパティ oncancel

例

ライブ例

HTML

<dialog class="example-dialog">
    <button class="close" type="reset">Close</button>
</dialog>

<button class="open-dialog">Open dialog</button>

<div class="result"></div>

JS

const result = document.querySelector('.result');

const dialog = document.querySelector('.example-dialog');

dialog.addEventListener('cancel', (event) => {
  result.textContent = 'dialog was canceled';
});

const openDialog = document.querySelector('.open-dialog');
openDialog.addEventListener('click', () => {
  if (typeof dialog.showModal === 'function') {
      dialog.showModal();
      result.textContent = '';
  } else {
      result.textContent = 'The dialog API is not supported by this browser';
  }
});

const closeButton = document.querySelector('.close');
closeButton.addEventListener('click', () => {
    dialog.close();
});

結果

仕様書

Specification
HTML Standard
# event-cancel
HTML Standard
# handler-oncancel

ブラウザーの互換性

BCD tables only load in the browser

関連情報