使用 outerHTML 替换模板后，添加的 click 事件为何不触发？

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

使用 outerhtml 替换模板后，添加的 click 事件为何不触发？

您遇到的问题是，在使用 outerHTML 替换自定义标签后，添加的 click 事件无法触发。这是因为直接在 div 上监听点击事件无法捕获到嵌套的 span 元素上的 click 事件。

解决方案

要解决这个问题，我们直接监听 div 的点击事件，并判断事件目标是否是 span。如果是，则删除这个 span 元素。

修改后的代码如下：

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

随便看看