使用 outerHTML 添加标签后，点击事件无法触发，该如何解决？

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

使用 outerhtml 添加标签，click 事件无法触发

文中提到的问题是在使用 outerHTML 添加自定义标签后，监听标签的 click 事件无法触发。

该问题的原因是，当使用 outerHTML 添加标签时，会将整个标签及其子元素作为一个字符串插入到 DOM 中。此时，浏览器无法识别新添加的标签，因此无法触发其事件。

解决方法：

要解决此问题，可以使用以下方法：

以下是修改后的代码：

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

随便看看