Question

我试图找到一个Javascript事件，该事件将在元素的Display设置为none时触发。 style="display: none;"。

我必须使用香草JS（不能使用jQuery），但不幸的是，无法将Mutation Observer作为可能的解决方案。

换句话说，我正在尝试找到要与Element.addEventListener一起使用的事件。

隐藏元素时是否还会触发其他事件？

Answer 1

不幸的是，元素隐藏时没有事件发生。从逻辑上讲，您可以使用onchange事件，但这仅适用于<select>, <option>, <form>。

在这种情况下，我应该做的是发现您的元素被隐藏并在其上进行事件。甚至更好的是找到隐藏该事件的事件（即使您使用插件，也可以在源代码中找到它）。

例如，如果您知道单击按钮，它将隐藏。可以在您的DOM上进行1个以上的事件。

Answer 2

一种可能的方法是使用setInterval和getComputedStyle检查显示的样式

var elem = document.getElementById('div');
var interval = setInterval((() => {
  if (window.getComputedStyle(elem).display === "none") {
    console.log('hidden');
    clearInterval(interval);
  }
}), 500);

setTimeout((() => elem.style.display = 'none'), 2000);

<div id='div'> Foo </div>

EventListener用于隐藏元素

2 个答案: