outerHTML 添加点击事件为何失效？

发布日期： 2024-11-07 阅读量： 作者： 网络

outerhtml 添加点击事件为何失效？

在使用 outerHTML 将动态标签添加到 DOM 的过程中，遇到的一个常见问题是添加的点击事件无法触发。这通常是因为直接监听容器元素的点击事件，而容器元素不是实际触发事件的标签。

下面是一个修正的示例代码：

handleClick(e) {
  // 判断点击的是 SPAN 节点(删除图标)
  if (e.target.nodeName === "SPAN") {
    // 如果是删除按钮，删除标签
    e.target.parentNode.remove();
  }
}

随便看看