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

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

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

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

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

代码通过判断 e.target.nodeName 是否为 "SPAN" 来确定是否点击了删除图标，如果是则删除该标签。这种方法可以确保点击图标时触发事件。

以上就是outerHTML 添加点击事件为何失效？的详细内容，更多请关注其它相关文章！