Javascript 递归搜索节点树

场景：我有一个无序的列表项列表。每个列表项中都有一个span，每个span中都有一个img标记。我的html结构如下所示

<ul class="slider-controls">
    <li data-preview1="./images/1.1.jpeg" data-preview2="./images/1.2.jpeg"><span><img src="./images/color1.jpeg"></img></span></li>
    <li data-preview1="./images/2.1.jpeg" data-preview2="./images/2.2.jpeg"><span><img src="./images/color2.jpeg"></img></span></li>
    <li data-preview1="./images/3.1.jpeg" data-preview2="./images/3.2.jpeg"><span><img src="./images/color3.jpeg"></img></span></li>
  </ul>

我像这样使用findUpTag（el，“LI”）

我知道我的递归搜索正在工作，因为当当前元素=“LI”时，我总是得到console.log（“success”）输出

然而，当我点击图像标签时，我的返回值总是未定义的！即使我的方法找到了李

我做错了什么？

这是因为您没有返回递归调用的结果。您还需要处理

el.parentNode

为

null

的情况：

function findUpTag(el, tag) {
  console.log(el.tagName, tag);
    if (el.tagName === tag) {
      console.log("success!", el);
      return el;
    } else {
      return el.parentNode ? findUpTag(el.parentNode, tag) : null; // <====
    }
}

---

如果他们正在单击

img

标记，则应该允许事件冒泡到父

li

。你一开始对这项活动有何感想？哦，我的上帝，非常感谢你！我知道这是非常明显的事情！要学究式，您永远不需要执行递归：

function findUpTag(el, tag) {
  console.log(el.tagName, tag);
    if (el.tagName === tag) {
      console.log("success!", el);
      return el;
    } else {
      return el.parentNode ? findUpTag(el.parentNode, tag) : null; // <====
    }
}

function findUpTag(el, tag) {
  while (el) {
    if (el.tagName === tag) {
      console.log("success!", el);
      return el;
    }
    el = el.parentNode;
  }
  return null;
}