单击子项时，必须stopPropagation事件：

function doChildStuff(e) {
  e.stopPropagation();
  console.log('child clicked');
}

function doParentStuff() {
  console.log('parent clicked');
}

<div class="the-parent">
  <div>
    <a onClick="doParentStuff()">
      <div>
        Test
        <button onClick="doChildStuff(event)">Child</button>
      </div>
    </a>
  </div>
</div>

避免使用Event.stopPropagation()（除非您真的知道自己在做什么）。

应用程序或第三方代码不应停止或阻止事件在应用程序层/组件中传播。
相反，更改逻辑以实现第三个函数（如doStuff），该函数将根据Event.target.closest()匹配触发所需的函数

const doChildStuff = () => {
  console.log("child stuff");
};

const doParentStuff = () => {
  console.log("parent stuff");
};

const doStuff = (ev) => {
 if (!ev.target.closest(".icon")) {
    doParentStuff();
 }
 doChildStuff();
};

document.querySelectorAll(".anchor").forEach(elAnchor => {
  elAnchor.addEventListener("click", doStuff);
});

<div class="the-parent">
  <div>
    <a class="anchor">
      <div>
        Link
        <i class="icon">icon</i>
      </div>
    </a>
  </div>
</div>

另外，停止使用HTML内联on*属性处理程序。这样的代码很难维护和调试。JavaScript应该只在一个地方，那就是相应的标记或文件。请改用addEventListener。
即使没有要求，如果您还想分离父处理程序，也只需将其放入else块中：
一个二个一个一个