点击Button后按钮未自动移除的技术问题求助

问题根源 #

你遇到的问题核心是事件执行顺序和事件冒泡导致的：

• 点击按钮时，事件触发顺序为 mousedown（document上的监听器）→ mouseup → click（按钮的onclick）。
• document的mousedown监听器先触发时，按钮还未被移除，此时判断点击目标在按钮内，不会执行移除操作，也不会移除这个监听器。
• 之后按钮的click事件执行，虽然移除了按钮，但document上的mousedown监听器依然存在。当你再次点击页面时，这个监听器触发，尝试移除已经不存在的按钮，看起来像是按钮才消失。

修复方案 #

方式一：在按钮点击时主动移除外部点击监听器

给document的mousedown监听器命名，这样可以在按钮点击后直接移除它，避免后续干扰。

修改后的代码：

document.addEventListener("mouseup", function(event) {
  var selection = window.getSelection();
  var selectionText = selection.toString().trim();

  if (selectionText && selectionText !== "") {
    var rect = selection.getRangeAt(0).getBoundingClientRect();
    const button = document.createElement("button");
    button.textContent = "Button";
    button.style.position = "fixed";
    button.style.top = (rect.top - 50) + "px";
    button.style.left = (rect.left) + "px";

    // 命名外部点击监听器
    function handleOutsideClick(event) {
      var isClickInside = button.contains(event.target);
      if (!isClickInside) {
        button.parentNode.removeChild(button);
        document.removeEventListener("mousedown", handleOutsideClick);
      }
    }

    button.onclick = function() {
      const popup = createPopup(selectionText, rect);
      document.body.appendChild(popup);

      // 弹窗外部点击处理
      function handlePopupOutsideClick(event) {
        var isClickInside = popup.contains(event.target);
        if (!isClickInside) {
          popup.parentNode.removeChild(popup);
          document.removeEventListener("mousedown", handlePopupOutsideClick);
        }
      }
      document.addEventListener("mousedown", handlePopupOutsideClick);

      // 移除按钮并清理外部点击监听器
      button.parentNode.removeChild(button);
      document.removeEventListener("mousedown", handleOutsideClick);
    }

    document.body.appendChild(button);
    document.addEventListener("mousedown", handleOutsideClick);
  }
});

// 补充createPopup函数示例（需确保你项目中存在该函数或按需求修改）
function createPopup(text, rect) {
  const popup = document.createElement("div");
  popup.textContent = `选中的文本：${text}`;
  popup.style.position = "fixed";
  popup.style.top = (rect.bottom + 10) + "px";
  popup.style.left = rect.left + "px";
  popup.style.padding = "10px";
  popup.style.border = "1px solid #ccc";
  popup.style.backgroundColor = "#fff";
  return popup;
}

方式二：阻止按钮的mousedown事件冒泡

在按钮的mousedown事件中阻止冒泡，让document的mousedown监听器不会触发，从根源避免冲突。

修改后的代码：

document.addEventListener("mouseup", function(event) {
  var selection = window.getSelection();
  var selectionText = selection.toString().trim();

  if (selectionText && selectionText !== "") {
    var rect = selection.getRangeAt(0).getBoundingClientRect();
    const button = document.createElement("button");
    button.textContent = "Button";
    button.style.position = "fixed";
    button.style.top = (rect.top - 50) + "px";
    button.style.left = (rect.left) + "px";

    // 阻止按钮mousedown事件冒泡
    button.addEventListener("mousedown", function(event) {
      event.stopPropagation();
    });

    button.onclick = function() {
      const popup = createPopup(selectionText, rect);
      document.body.appendChild(popup);

      // 弹窗外部点击处理
      function handlePopupOutsideClick(event) {
        var isClickInside = popup.contains(event.target);
        if (!isClickInside) {
          popup.parentNode.removeChild(popup);
          document.removeEventListener("mousedown", handlePopupOutsideClick);
        }
      }
      document.addEventListener("mousedown", handlePopupOutsideClick);

      button.parentNode.removeChild(button);
    }

    // 按钮外部点击处理
    function handleOutsideClick(event) {
      var isClickInside = button.contains(event.target);
      if (!isClickInside) {
        button.parentNode.removeChild(button);
        document.removeEventListener("mousedown", handleOutsideClick);
      }
    }

    document.body.appendChild(button);
    document.addEventListener("mousedown", handleOutsideClick);
  }
});

// 补充createPopup函数示例
function createPopup(text, rect) {
  const popup = document.createElement("div");
  popup.textContent = `选中的文本：${text}`;
  popup.style.position = "fixed";
  popup.style.top = (rect.bottom + 10) + "px";
  popup.style.left = rect.left + "px";
  popup.style.padding = "10px";
  popup.style.border = "1px solid #ccc";
  popup.style.backgroundColor = "#fff";
  return popup;
}

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