Snackbar 为什么点关闭没反应？

司徒红凤提问于 2026-03-16 20:47:19 阅读 6

交互

我用原生 JS 写了个 Snackbar，点击关闭按钮根本没反应，DOM 都在页面上。

试过给按钮加 addEventListener，也试过事件委托，但点击后既不消失也不报错，控制台干干净净……

这是我的代码：

function showSnackbar() {
  const snackbar = document.createElement('div');
  snackbar.className = 'snackbar';
  snackbar.innerHTML = 
    操作成功！
    <button class="close-btn">×</button>
  ;
  document.body.appendChild(snackbar);

  // 尝试绑定关闭事件
  const closeBtn = snackbar.querySelector('.close-btn');
  closeBtn.addEventListener('click', () => {
    snackbar.remove();
  });
}

我来解答赞 2 收藏

反馈

1 条解答

上官柯欣 Lv1

兄弟，你这段代码逻辑上没毛病的，事件绑定应该是能跑通的。

问题大概率出在 CSS 那边。检查一下这几个地方：

1. 按钮或者它的父元素有没有加 pointer-events: none？这属性加上去点击事件就直接被忽略了，但控制台不会报错

2. z-index 对了吗？Snackbar 可能被其他元素盖住了，按钮实际点的是上层的东西

3. 按钮有没有设置具体的宽高？如果宽高是 0 或者没显示出来，点不到也正常

你在浏览器开发者工具里检查一下按钮元素，看看 computed 样式里有没有覆盖默认行为的属性。

如果 CSS 都没问题，你可以先在事件回调里打个 console.log 确认一下回调到底有没有被执行：

closeBtn.addEventListener('click', () => {

  console.log('clicked');

  snackbar.remove();

});

这样能帮你确定是事件没绑定上还是绑定上了但 remove 没效果。

2026-03-17 14:00