dialog要素ではESCキーを使ってダイアログを閉じた場合にはcancelイベントが発火すると思うのですが、
showModalメソッドで表示後、ダイアログをクリックしたりせずにそのままESCキーを押すと、
ダイアログは閉じられますが、cancelイベントが発火せずcloseイベントのみになります。
表示されたダイアログを一度クリックしてからESCキーを押すと、cancelイベントが発火し、
その後closeイベントが発火します。
これは正しい動作なのでしょうか?
chromeおよびedgeで確認しています。
何か関連情報をお持ちの方が居ましたら共有いただけると助かります。
以下で動作を確認していただけます。
- ボタンクリックでダイアログが表示する
- そのままESCキーを押してダイアログを閉じる(consoleには 'dialog close' のログが出る)
- ボタンクリックでダイアログを表示する
- 表示されたダイアログをクリックする
- ESCキーを押してダイアログを閉じる(consoleには 'dialog cancel' および 'dialog close' のログが出る)
const button = document.querySelector("button")
const dialog = document.querySelector("dialog")
dialog.addEventListener('close', () => console.log('dialog close'))
dialog.addEventListener('cancel', () => console.log('dialog cancel'))
button.addEventListener('click', () => dialog.showModal())
<button>open</button>
<dialog>
<h1>title</h1>
<p>contents</p>
</dialog>