ToggleEventを使ってPopoverの開閉を検知する

ToggleEventを使うことで、Popoverの開閉を検知することができる。

ブラウザ対応状況

Popover要素の開閉イベント

ToggleEventのoldState/newStateプロパティで、open/closedの状態を取得できる。

<button popovertarget="my-popover">Popover</button>

<div id="my-popover" popover>Popover Content</div>

const popover = document.querySelector('#my-popover')

popover.addEventListener('beforetoggle', event => {
  /**
   * event.oldState: 開閉前の状態（open / closed)
   * event.newState: 開閉後の状態（open / closed)
   */
})

dialog要素のshowModal()の場合

dialog#showModal()を使った場合、ブラウザによってToggleEventが発火しないことがある。

2024年11月現在では、Chrome 132 beta、FirefoxではToggleEventが発火するが、Safari TPでは発火しなかった。

<button popovertarget="my-dialog">Dialog</button>

<dialog id="my-dialog" popover>
    Dialog
    <button
       popovertarget="my-dialog"
       popovertargetaction="hide"
    >Close</button>
</dialog>

const dialog = document.querySelector('#my-dialog')

dialog.addEventListener('beforetoggle', event => {
  console.log(event.newState)
})

dialog.showModal()