Intro.js的disableInteraction配置不生效，高亮元素无法点击如何解决？

问题根因 #

该问题由层级冲突导致：Intro.js默认生成的遮罩层层级高于Angular的<app-root>根节点，而你的目标元素全部在下，就算关闭交互禁用配置，目标元素仍会被遮罩层遮挡，无法触发点击事件。

修复方案 #

• 步骤1：调整全局样式优先级
  在项目全局样式文件（styles.scss/styles.css）中添加如下配置，调整各元素层级和交互属性：

/* 降低Intro.js遮罩层层级 */
.introjs-overlay {
  z-index: 999997 !important;
}
/* 提升Angular根节点层级，保证根节点内元素可被点击到 */
app-root {
  position: relative !important;
  z-index: 999998 !important;
}
/* 避免自定义高亮类意外禁用交互 */
.customHighlight {
  pointer-events: auto !important;
}
/* 保证引导提示框始终在最上层，不被元素遮挡 */
.introjs-tooltip {
  z-index: 1000000 !important;
}

• 步骤2：新增引导切换钩子兜底兼容
  如果调整样式后仍存在问题，可以在Intro.js配置中添加onAfterChange钩子，主动给当前步骤的目标元素提升层级、开放交互权限：

this.introJS.setOptions({
  tooltipClass: 'customTooltip',
  highlightClass: 'customHighlight',
  exitOnOverlayClick: false,
  disableInteraction: false,
  // 新增引导切换钩子
  onAfterChange: () => {
    const currentStepIndex = this.introJS._currentStep;
    const currentTarget = this.introJS._options.steps[currentStepIndex]?.element;
    if (currentTarget) {
      currentTarget.style.pointerEvents = 'auto';
      currentTarget.style.zIndex = '999999';
    }
  },
  steps: [
    {
      intro: 'Welcome to the web let me show you around!',
    },
    {
      element: document.getElementById('step3'),
      intro: 'Fill out the form',
      position: 'right'
    },
    {
      element: document.querySelector('#step4'),
      intro: 'Click Create an account',
      position: 'right'
    }
  ]
}).start();

• 额外注意事项
  如果你的引导目标元素是动态渲染的，需要保证执行Intro.js初始化代码时，step3、step4元素已经完成挂载，否则Intro.js会跳过对应元素渲染全屏引导，自然无法触发元素点击。

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