点击文本触发的弹窗在文本编辑后位置异常的修复需求

AI 小北

2026-5-13

解决编辑文本后弹窗位置不更新的问题

我来帮你搞定这个弹窗位置固定的问题！核心原因是你当前只在点击文本时计算一次弹窗位置，但当文本内容编辑后，文本容器的宽度已经变化，却没有重新触发位置计算，所以弹窗还停留在原来的地方。

解决方案：监听文本变化事件，实时更新弹窗位置

我们可以把计算弹窗位置的逻辑抽成一个独立函数，然后在两个关键时机调用它：

点击文本显示弹窗时
文本内容发生编辑（输入、删除、粘贴）时

修改后的代码示例

首先，抽离位置计算的通用函数：

function updatePopupPosition(textElementId, popupId) {
  const textEl = document.getElementById(textElementId);
  const popupEl = document.getElementById(popupId);
  
  if (!textEl || !popupEl) return;
  
  // 计算文本容器的当前偏移左值 + 容器宽度 + 额外间距（9px）
  const newLeftPosition = textEl.offsetLeft + textEl.offsetWidth + 9;
  popupEl.style.left = `${newLeftPosition}px`;
}

然后修改你的交互逻辑，同时添加文本输入监听：

// 假设你的文本元素id是"layer"，弹窗id是"light"
const textLayer = document.getElementById("layer");
const popup = document.getElementById("light");

// 点击文本时显示弹窗并更新位置
textLayer.addEventListener("click", function() {
  // 保留你原来显示弹窗的逻辑（比如设置display: block）
  popup.style.display = "block";
  // 调用更新位置函数
  updatePopupPosition(this.id, popup.id);
});

// 监听文本输入事件，实时同步弹窗位置
textLayer.addEventListener("input", function() {
  updatePopupPosition(this.id, popup.id);
});