Element made inert or hidden event

Question

是否可以检测元素何时被隐藏，例如从惰性或隐藏？

我有一个站点地图页面，我的链接使用

IntersectionObserver

和

mouseover

事件来检测链接何时对预加载数据非常可见。特别是在像站点地图页面这样有很多链接的页面上，这可能会变得非常昂贵，或者至少在分析器上有点烦人和嘈杂。

我想尝试的一个想法是当链接隐藏在披露小部件内时禁用观察者和预取逻辑，有点像

details

元素或在我的例子中是手风琴。

我可以明确地输入数据（在我的例子中可能使用 React 提供程序）或者只是不在此页面链接上使用该功能。但我认为检测是否有一种方法可以检测元素是否隐藏或在披露小部件内变为惰性可能会很优雅。

所以基本上我想探索的一个选择是：

• 检测锚元素是否位于

  inert

  、

  hidden

  或

  opacity: 0

  元素下方。
• 检测锚元素是否变得不可标记。

Answer 1

我不知道有什么本机方法可以检测您要查找的内容，但您应该能够自己构建它。这里有一些提示：

• 使用

  Element.closest()

  方法查询元素（或祖先）是否具有

  inert

  或

  hidden

  属性。
• 使用

  Element.getAttribute()

  方法检查元素是否不可标记（即具有负值的

  tabindex

  属性）。
• 使用

  Element.getBoundingClientRect()

  或

  Element.getClientRects()

  方法找出元素是否在视觉上被隐藏。
• 使用

  getComputedStyle(element)

  函数找出元素是否被声明为隐藏。
• 使用

  MutationObserver

  来检测属性和 DOM 树的变化。

---

就我个人而言，我建议改用明确的方式来说明链接是否应该预加载，例如某个属性的存在/不存在。

这样的属性将允许更大的灵活性：

IntersectionObserver

不必自己计算链接是否应该预加载（重复），并且该属性可以最初设置（例如在 HTML 源代码中）或延迟（例如输入时）预加载前的视口）。

Answer 2

你可以使用这样的东西来获取所有隐藏的元素。我使用了 getComputedStyle 函数来获取应用于元素的最终 CSS。 :

const anchorElement = document.querySelector('a');
const computedStyle = window.getComputedStyle(anchorElement);

// Check if hidden
if (computedStyle.display === 'none' || computedStyle.visibility === 'hidden' || computedStyle.opacity === '0') {
  
}

如果你想检查锚元素是否是键盘可聚焦的，你可以使用这样的东西： const anchorElement = document.querySelector('a');

// Check if untabbable
if (anchorElement.tabIndex === -1) {

}