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();
});

結果

仕様書

仕様書 状態
HTML Living Standard
cancel の定義
現行の標準

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
cancel eventChrome 完全対応 ありEdge 完全対応 79Firefox 完全対応 78IE 未対応 なしOpera ? Safari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明

関連情報