如何检测用户是否已在mdl-layout__drawer外部点击并且抽屉已关闭？

Question

我希望收到MDL抽屉已关闭的通知，以便能够根据用户在抽屉中设置的某些选项重新加载主页面。

如何才能做到这一点？

Answer 1

在抽屉元件上听取transitionend事件，然后检测抽屉是否有is-visible类来确定抽屉是否刚刚打开或关闭。例如：

const drawer = document.querySelector('.mdl-layout__drawer');
drawer.addEventListener('transitionend', (event) => {
  if (!drawer.classList.contains('is-visible')) {
    alert('closed');
  }
});