如何解决Tailwind CSS中弹窗打开时的高亮区域异常问题

问题场景 #

• 点击「View Log」或「Add Note」按钮打开弹窗时，页面两处标记区域出现高亮异常
• 点击其他弹窗按钮时，该高亮现象正常不出现

排查方向 #

1. 检查按钮事件绑定
   确认这两个按钮的点击事件是否额外绑定了高亮相关逻辑，比如误触发了标记区域的focus状态或添加了高亮类。直接查看按钮的点击处理函数，排查是否存在操作标记区域DOM的代码：

   // 警惕这类可能误触发的代码
   document.querySelectorAll('.marked-area').forEach(el => el.classList.add('highlight'));
   

2. 排查样式冲突
   检查标记区域的CSS样式，看是否有:focus、:target这类伪类被弹窗打开时的浏览器行为意外触发。同时确认这两个弹窗的样式是否存在全局污染，比如过高的z-index导致聚焦逻辑异常：

   /* 检查是否存在这类易被误触发的样式 */
   .marked-area:focus {
     outline: 2px solid #007bff;
     background-color: rgba(0,123,255,0.1);
   }
   

3. 对比弹窗初始化逻辑
   把异常弹窗和正常弹窗的初始化代码做对比，看是否「View Log」和「Add Note」弹窗开启了autoFocus属性，或者执行了滚动、聚焦到标记区域的额外逻辑。如果用了第三方弹窗库，优先检查配置项差异。

解决方案示例 #

• 事件绑定误操作：移除按钮点击事件中不必要的标记区域高亮代码，或者添加条件判断限制触发场景。
• 样式冲突：修改标记区域的伪类样式，增加触发条件（比如仅在手动点击时高亮），或者关闭弹窗的autoFocus配置：

  // 关闭弹窗自动聚焦，避免误触发标记区域焦点
  const viewLogModal = new Modal({
    autoFocus: false,
    // 其他弹窗配置
  });
  

• 初始化逻辑差异：对齐异常弹窗和正常弹窗的初始化流程，移除多余的DOM操作代码。

内容的提问来源于stack exchange，提问作者R. Elavarasan