如何获取未被HTML标签包裹的点击文本值？

这个问题的核心在于，target4 是 <div> 的直接子文本节点，而非元素节点，没法直接给它绑定事件。我们可以通过事件委托在父元素上监听点击，再判断点击的目标是不是文本节点，最后处理内容即可。

原生 JavaScript 实现方案 #

首先给父 <div> 绑定点击事件，然后通过事件对象的 target 属性判断节点类型：

// 获取目标div元素
const container = document.querySelector('div');

container.addEventListener('click', (e) => {
  // 文本节点的nodeType为3（Node.TEXT_NODE的常量值）
  if (e.target.nodeType === Node.TEXT_NODE) {
    // 去除文本首尾的空白字符（避免点击空格区域触发）
    const pureText = e.target.textContent.trim();
    // 只有处理后非空的文本才是我们需要的
    if (pureText) {
      console.log('点击的文本内容：', pureText);
      // 这里可以添加你需要的业务逻辑，比如把值赋值给变量、展示到页面等
    }
  }
});

代码解释 #

• 事件委托：因为文本节点无法直接绑定事件，所以在父元素上监听点击事件，利用事件冒泡特性捕获点击行为。
• 节点类型判断：通过 nodeType === Node.TEXT_NODE 确认点击的是文本节点。
• 空白处理：原HTML中的文本节点包含前后空格（比如 target4 前后的空格），用 trim() 去除首尾空白，避免点击空白区域时获取无效内容。

jQuery 实现方案（如果项目中使用了jQuery） #

思路和原生一致，只是语法更简洁：

$('div').on('click', function(e) {
  const targetNode = e.target;
  if (targetNode.nodeType === 3) {
    const pureText = $.trim(targetNode.textContent);
    if (pureText) {
      console.log('点击的文本内容：', pureText);
    }
  }
});

这样点击 target4（或 target1）时，就能精准获取到对应的纯文本内容啦～

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