本文详解如何在用户选中文本时动态生成浮动按钮，并确保点击按钮时既能触发弹窗又能立即自我销毁，避免因事件监听器嵌套和重复绑定导致的“需点击两次才消失”问题。

在原实现中，核心问题在于事件监听器的错误嵌套与作用域混乱：每次鼠标抬起（mouseup）都会为新按钮重新绑定 mousedown 监听器，而 button.onclick 内部又试图移除自身——但由于 mousedown 监听器是全局绑定且未被及时清理，它会在按钮点击后仍捕获后续点击事件，干扰按钮的即时销毁逻辑；更严重的是，arguments.callee 在严格模式下已禁用，且 removeEventListener 无法匹配匿名函数，导致监听器泄漏，进一步加剧行为异常。

✅ 正确解法是采用 事件委托（Event Delegation） + 统一事件总线管理，避免动态创建监听器，转而由 document 统一响应所有相关事件，并通过语义化属性（如 data-created）精准识别目标元素。

以下是优化后的完整实现：

// 全局仅绑定三次事件监听，清晰可控
document.addEventListener('mouseup', handle);
document.addEventListener('mousedown', handle);
document.addEventListener('click', handle);

function handle(evt) {
  // 1. 检查是否点击了已存在的动态按钮（通过 data-created 标识）
  const clickedButton = evt.target.closest('[data-created]');
  const existingButton = document.querySelector('[data-created]');

  // 2. mousedown 且未点在按钮上 → 移除按钮（失焦销毁）
  if (evt.type === 'mousedown' && !clickedButton) {
    existingButton?.remove();
    return;
  }

  // 3. click 且点在按钮上 → 立即销毁按钮，并显示弹窗
  if (evt.type === 'click' && clickedButton) {
    clickedButton.remove();
    // ✅ 此处调用弹窗逻辑（注意：不再在此处绑定新监听器！）
    const selection = window.getSelection();
    const rect = selection.getRangeAt(0).getBoundingClientRect();
    const popup = createPopup(selection.toString().trim(), rect);
    document.body.appendChild(popup);

    // ✅ 弹窗销毁逻辑也应使用事件委托（见下方补充）
    return;
  }

  // 4. mouseup 且有有效文本选中 & 当前无按钮 → 创建新按钮
  const selection = window.getSelection();
  const selectionText = selection.toString().trim();
  if (selectionText && !existingButton) {
    const rect = selection.getRangeAt(0).getBoundingClientRect();
    const button = document.createElement('button');
    button.setAttribute('data-created', '1');
    button.textContent = '?';
    button.style.cssText = `
      position: fixed;
      top: ${rect.top - 40}px;
      left: ${rect.left}px;
      padding: 6px 12px;
      font-size: 14px;
      border: none;
      border-radius: 4px;
      background: #007bff;
      color: white;
      cursor: pointer;
      z-index: 10000;
      box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    `;
    document.body.appendChild(button);
  }
}

// ? 补充：弹窗点击外部关闭（同样用事件委托，不污染 button 逻辑）
document.addEventListener('click', function (evt) {
  const popup = document.querySelector('.text-popup'); // 假设弹窗有 class="text-popup"
  if (popup && !popup.contains(evt.target) && !evt.target.closest('[data-created]')) {
    popup.remove();
  }
});

// 示例弹窗创建函数（按需替换为你自己的实现）
function createPopup(text, rect) {
  const popup = document.createElement('div');
  popup.className = 'text-popup';
  popup.innerHTML = `
    
      Selected: "${text}"
      Click outside to close
    
  `;
  return popup;
}

? 关键改进点总结：

• ✅ 零动态监听器：所有事件均由 document 统一处理，通过 closest() 和 querySelector() 精准定位，彻底规避 removeEventListener 失效问题；
• ✅ 单次创建、明确销毁：按钮只在 mouseup 且无现存按钮时创建；销毁分两路——click 点击按钮时立即删、mousedown 非按钮区域时删；
• ✅ 弹窗销毁解耦：弹窗关闭逻辑独立于按钮事件，同样采用委托，避免嵌套监听器干扰；
• ✅ 语义化标记：使用 data-created 属性替代 DOM 位置或临时变量判断，健壮且可读性强；
• ⚠️ 注意事项：务必确保 createPopup() 返回的弹窗元素具有唯一可识别的 class 或属性（如 .text-popup），以便委托逻辑准确匹配；若页面存在其他 click/mousedown 监听器，建议添加 evt.stopImmediatePropagation() 控制优先级。

该方案结构清晰、无内存泄漏风险，一次点击即可完成“显示→交互→销毁”闭环，是现代 Web 文本工具栏类功能的推荐实践。