Vue项目中使用vanilla.js动态创建元素的onclick事件不生效如何解决

常见原因排查 #

• 检查元素插入DOM后是否被重写：如果插入span后，你对其父元素执行了innerHTML赋值操作，会销毁所有子元素的已绑定事件，导致onclick失效
• 检查CSS样式配置：检查.cancel_icon或.material-icons类是否设置了pointer-events: none，该属性会阻止元素接收点击事件
• 检查事件是否被上层拦截：上层元素如果绑定了click事件并执行了stopPropagation()或return false，会拦截下层元素的点击事件冒泡
• 检查绑定函数是否报错：在onclick回调中先打印日志测试触发情况，避免removeSpan方法执行报错导致看起来没有触发

// 测试代码
icon.onclick = () => {
  console.log('点击触发')
  this.removeSpan(span)
}

最优解决方案 #

推荐使用addEventListener绑定事件，比直接赋值onclick更稳定，不会被其他赋值操作轻易覆盖：

icon.classList.add("material-icons", "cancel_icon")
icon.innerHTML = "cancel"
icon.style.fontSize = '14px'
icon.style.position = 'relative'
icon.style.top = '2px'
icon.style.left = '2px'

// 替换原有onclick绑定
icon.addEventListener('click', () => {
  span.remove()
}, false)

return span

如果你的span是频繁动态生成的场景，推荐使用事件委托方案，只需要绑定一次到静态父容器即可，不需要每次生成元素都单独绑定：

// 假设所有span的父容器是页面初始化就存在的静态元素，类名为content-container
document.querySelector('.content-container').addEventListener('click', (e) => {
  // 判断点击的是取消图标
  if (e.target.matches('.cancel_icon')) {
    // 找到最近的上层span元素删除
    const targetSpan = e.target.closest('span')
    targetSpan?.remove()
  }
})

内容的提问来源于stack exchange，提问作者mrssolaris