1

dialog要素ではESCキーを使ってダイアログを閉じた場合にはcancelイベントが発火すると思うのですが、
showModalメソッドで表示後、ダイアログをクリックしたりせずにそのままESCキーを押すと、
ダイアログは閉じられますが、cancelイベントが発火せずcloseイベントのみになります。
表示されたダイアログを一度クリックしてからESCキーを押すと、cancelイベントが発火し、
その後closeイベントが発火します。
これは正しい動作なのでしょうか?
chromeおよびedgeで確認しています。

何か関連情報をお持ちの方が居ましたら共有いただけると助かります。

以下で動作を確認していただけます。

  1. ボタンクリックでダイアログが表示する
  2. そのままESCキーを押してダイアログを閉じる(consoleには 'dialog close' のログが出る)
  3. ボタンクリックでダイアログを表示する
  4. 表示されたダイアログをクリックする
  5. 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>

https://jsfiddle.net/5jhn6Ls3/1/

0

1 件の回答 1

3

正しい動作です。

デスクトップブラウザにおける Esc キーや、モバイルブラウザにおける戻るボタンのような、対象を閉じることを望むようなアクションをユーザーが行うと、ブラウザに対して close request が送信されます。ブラウザはこの close request を受けたとき、cancel イベントや close イベントを発火させます。ただし、 close イベントは常に発火される一方で、 cancel イベントは条件付きで発火されます。

その cancel イベントが発火される条件というのは、ダイアログを開いた後に、ユーザがページに対して何らかの操作を与えることです[1]。仕様上は、 window オブジェクトに対して操作を行った最新の時刻が、同 window オブジェクトにおける操作履歴に存在する最新の操作時刻と一致しないことが条件となっています。

§ 6.10.2 Close watcher infrastructure[1]

To request to close a close watcher closeWatcher:

  1. If closeWatcher is not active, then return.

  2. If closeWatcher's is running cancel action is true, then return.

  3. Let window be closeWatcher's window.

  4. If window's associated Document is not fully active, then return.

  5. If window has history-action activation, then:

    1. Set closeWatcher's is running cancel action to true.

    2. Let shouldContinue be the result of running closeWatcher's cancel action.

    3. Set closeWatcher's is running cancel action to false.

    4. If shouldContinue is false, then:

      1. Consume history-action user activation given window.

      2. Return.

The guard on these substeps means that the cancel action only has a
chance to prevent us from continuing onward to the close action when
window has history-action activation. In particular, since these
substeps consume history-action user activation, requesting to close a
close watcher twice without any intervening user activation will skip
these substeps.

  1. Close closeWatcher.

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。