程序开发 · 2024年7月17日

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

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

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

解决方案

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

修改后的代码如下:

立即学习“”;

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

登录后复制

以上就是使用 outerHTML 替换模板后,添加的 click 事件为何不触发?的详细内容,更多请关注GTHOST其它相关文章!