如何检测元素因inert、hidden等属性被隐藏或不可交互的事件？

针对折叠组件内链接的预加载逻辑，你可以通过以下两种优雅的检测方式来禁用不必要的观测和预取：

一、检测锚点是否处于隐藏/inert/透明容器下 #

递归遍历锚点的父元素，检查是否存在会导致元素不可见的属性或样式：

function isElementInHiddenContainer(el) {
  let current = el;
  while (current && current !== document.body) {
    // 检查原生hidden属性
    if (current.hidden) return true;
    // 检查inert属性（原生支持，旧浏览器可加polyfill）
    if (current.hasAttribute('inert')) return true;
    // 计算实际生效的样式
    const computedStyle = window.getComputedStyle(current);
    // 检测完全透明、隐藏或不可见状态
    if (parseFloat(computedStyle.opacity) === 0 || 
        computedStyle.display === 'none' || 
        computedStyle.visibility === 'hidden') {
      return true;
    }
    current = current.parentElement;
  }
  return false;
}

使用方式：在初始化观测器或触发预加载前调用该函数，返回true则跳过预取逻辑。

二、检测锚点是否不可被Tab选中 #

基于无障碍聚焦规则，判断元素是否无法通过Tab键访问，这更贴合折叠组件的交互逻辑：

function isElementTabUnselectable(el) {
  // 元素本身不可聚焦（如tabIndex=-1、禁用状态）
  if (el.tabIndex === -1 || el.hasAttribute('disabled')) return true;
  // 父级存在inert属性（会阻断子元素的聚焦能力）
  let current = el.parentElement;
  while (current && current !== document.body) {
    if (current.hasAttribute('inert')) return true;
    current = current.parentElement;
  }
  // 利用:focusable伪类判断元素是否具备聚焦能力
  return !el.matches(':focusable');
}

使用方式：和上述检测函数结合，在预加载触发前做双重校验，确保只对可见且可交互的链接执行预取。

集成到现有逻辑中 #

将检测逻辑嵌入IntersectionObserver和mouseover事件处理：

// 预加载函数示例
function preloadLinkData(url) {
  // 你的预加载实现
}

// 初始化IntersectionObserver
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const link = entry.target;
      // 检测是否需要跳过预加载
      if (isElementInHiddenContainer(link) || isElementTabUnselectable(link)) {
        return;
      }
      preloadLinkData(link.href);
    }
  });
});

// 绑定mouseover事件
document.querySelectorAll('.sitemap-link').forEach(link => {
  observer.observe(link);
  link.addEventListener('mouseover', () => {
    if (isElementInHiddenContainer(link) || isElementTabUnselectable(link)) {
      return;
    }
    preloadLinkData(link.href);
  });
});

额外优化建议 #

• 用WeakMap缓存检测结果，避免重复遍历DOM树，降低性能开销；
• 监听折叠组件的状态变化事件（如details的toggle事件），动态更新观测器的监听状态；
• 对于大型站点地图，可以分批初始化观测器，减少初始渲染时的性能压力。

内容的提问来源于stack exchange，提问作者user990666