如何给文本节点添加事件监听器？实现点击文本触发便签锚点需求

针对你需要点击文本时添加便签锚点的需求，这里提供两种可行方案：

方案一：直接给有效文本节点绑定点击事件 #

文本节点（Node.TEXT_NODE，nodeType为3）可以直接绑定事件，但需要过滤掉纯空白的文本节点，避免无效绑定。通过递归遍历容器内的所有节点，找到有实际内容的文本节点并绑定点击事件：

function bindTextClick(container, onTextClick) {
  const traverseNodes = (node) => {
    // 仅处理非空白的文本节点
    if (node.nodeType === Node.TEXT_NODE && node.textContent.trim()) {
      node.addEventListener('click', (e) => {
        // 传递点击事件对象，方便获取位置等信息
        onTextClick(e);
      });
    } 
    // 遍历元素节点的子节点
    else if (node.nodeType === Node.ELEMENT_NODE) {
      Array.from(node.childNodes).forEach(traverseNodes);
    }
  };
  traverseNodes(container);
}

// 调用示例
const textContainer = document.getElementById('your-container-id');
bindTextClick(textContainer, (e) => {
  // 这里实现添加便签锚点的逻辑，比如用e.clientX/e.clientY获取点击位置
  console.log(`点击文本位置：X=${e.clientX}, Y=${e.clientY}`);
});

如果容器内的文本是动态加载的，需要在文本更新后重新调用bindTextClick方法，确保新的文本节点也能绑定事件。

方案二：容器绑定事件，判断点击目标是否为文本区域 #

保持事件绑定在容器上，通过事件委托的方式，在触发点击时判断是否点击到了有效文本：

const textContainer = document.getElementById('your-container-id');
textContainer.addEventListener('click', (e) => {
  // 向上遍历节点，找到最近的文本节点
  let targetNode = e.target;
  while (targetNode && targetNode !== textContainer) {
    if (targetNode.nodeType === Node.TEXT_NODE) break;
    targetNode = targetNode.parentNode;
  }

  // 验证是否是有效文本节点
  if (targetNode?.nodeType === Node.TEXT_NODE && targetNode.textContent.trim()) {
    // 点击到有效文本，执行锚点添加逻辑
    console.log(`点击文本位置：X=${e.clientX}, Y=${e.clientY}`);
    return;
  }

  // 备选方案：利用Selection判断点击位置是否存在文本
  const selection = window.getSelection();
  if (selection.rangeCount > 0) {
    const selectedText = selection.toString().trim();
    if (selectedText) {
      // 点击位置属于文本区域，执行逻辑
      console.log('点击到文本区域');
    }
  }
});

这种方案无需处理动态文本的重新绑定，但要注意一些特殊情况（比如文本被多个元素嵌套时的节点遍历）。

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