JavaScript事件处理：点击列表项（含子元素）获取完整文本问题

你遇到的问题很典型——因为事件冒泡的特性，当你点击<li>内部的<span>时，evt.target指向的是<span>而不是<li>，所以只能拿到<span>的文本内容。要解决这个问题，我们需要找到点击元素所属的父级<li>元素，然后获取它的完整textContent。

修改后的代码方案 #

这里用原生JavaScript的closest()方法来快速定位到最近的<li>元素，现代主流浏览器都支持这个方法：

var searchInput = document.getElementById('searchInp');
var suggestions = document.getElementById("suggest");
suggestions.addEventListener("click", function(evt) {
  // 从点击的元素向上查找最近的<li>节点
  const targetLi = evt.target.closest('li');
  
  // 确保找到有效的<li>元素再执行后续操作
  if (targetLi) {
    // 获取<li>的完整文本，trim()可选，用来清理前后空白
    const fullText = targetLi.textContent.trim();
    searchInput.value = fullText;
  }
}, false);

兼容旧浏览器的备选方案 #

如果你的项目需要兼容IE这类不支持closest()的旧浏览器，可以自己实现一个简单的查找函数：

// 自定义函数：向上查找最近的<li>元素
function getParentLi(element) {
  while (element) {
    if (element.tagName === 'LI') {
      return element;
    }
    element = element.parentElement;
  }
  return null;
}

// 事件处理里替换成这个函数
var searchInput = document.getElementById('searchInp');
var suggestions = document.getElementById("suggest");
suggestions.addEventListener("click", function(evt) {
  const targetLi = getParentLi(evt.target);
  if (targetLi) {
    const fullText = targetLi.textContent.trim();
    searchInput.value = fullText;
  }
}, false);

原理说明 #

不管你点击的是<li>本身，还是它内部的<span>或者其他子元素，这个方法都会向上遍历DOM树，找到最接近的<li>祖先元素，这样就能确保获取到的是整个列表项的完整文本内容，不会出现点击不同位置内容不一致的问题。

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