javascript - 单击处理程序在同一元素上被调用两次

Question

我有两个 div 元素，inner 和 outer。我仅以编程方式触发 inner div 上的点击事件一次。但是日志显示事件处理程序在 inner div 上被调用了两次。这是代码。你能帮忙理解为什么会这样吗？代码也托管在 codesandbox 上

const inner = document.querySelector(".inner");
const outer = document.querySelector(".outer");
    
function clk(event) {
  console.log("click");
  console.log(event.target);
}
    
inner.addEventListener("click", clk);
outer.addEventListener("click", clk);
    
inner.click();

<div class="outer" id="div1">
  <div class="inner" id="div2"></div>
</div>

Answer 1

添加

event.stopPropagation()

到你的clk函数