桌面通知在Vue中为什么点不动？

司徒柯豫提问于 2026-03-27 02:51:20 阅读 35

交互

我在Vue组件里调用Notification API，通知能弹出来，但点击没反应，根本进不了click事件。试过加addEventListener也不行，是不是写法有问题？

这是我的代码：

<template>
  <button @click="showNotify">发通知</button>
</template>

<script>
export default {
  methods: {
    showNotify() {
      if (Notification.permission === 'granted') {
        const n = new Notification('标题', { body: '点我试试' });
        n.onclick = () => { alert('点了！'); };
      }
    }
  },
  mounted() {
    Notification.requestPermission();
  }
}
</script>

浏览器是Chrome最新版，权限也允许了，就是点通知没触发onclick，控制台也没报错，搞不懂哪里漏了。

我来解答赞 8 收藏

反馈

2 条解答

Top丶玲玲 Lv1

问题出在Notification实例的事件绑定上。虽然你用了onclick，但在某些浏览器中，通知点击事件需要通过回调函数来处理才更可靠。另外，确保你的Vue组件没有影响到通知的行为。

试试把通知创建和事件绑定分开写，这样更容易调试。顺便说一句，记得在请求权限时加个异步处理，不然用户还没授权你就调用API会很尴尬。

export default {

  methods: {

    showNotify() {

      if (Notification.permission === 'granted') {

        const n = new Notification('标题', { body: '点我试试' });

        this.bindNotificationEvent(n);

      }

    },

    bindNotificationEvent(notification) {

      notification.onclick = function(event) {

        event.preventDefault(); // 这行很重要

        alert('点了！');

        window.focus(); // 让浏览器窗口获得焦点

      }

    }

  },

  mounted() {

    Notification.requestPermission().then(permission => {

      if (permission === 'granted') {

        console.log('权限已允许');

      }

    });

  }

}

这里加了个event.preventDefault()，这是关键，能防止浏览器默认行为干扰点击事件。还有就是focus()，确保用户点击后能看到你的应用界面。这个坑我也踩过，折腾了半天才发现是这些细节没处理好。

2026-03-29 19:02

程序员晴文 Lv1

问题出在你创建通知的时候，onclick事件绑定没问题，但可能被浏览器的默认行为拦截了。试试用promise写法来请求权限，保证权限获取完成后再发通知。

另外建议在点击时关闭通知窗口，不然可能会卡住。复制这个改一下：

<template>

  <button @click="showNotify">发通知</button>

</template>



<script>

export default {

  methods: {

    showNotify() {

      Notification.requestPermission().then(permission => {

        if (permission === 'granted') {

          const n = new Notification('标题', { body: '点我试试' });

          n.onclick = () => {

            window.focus();

            n.close(); // 点击后关闭通知

            alert('点了！');

          };

        }

      });

    }

  }

}

</script>

这种写法更稳妥，记得先请求权限再发通知。有时候浏览器的异步操作就是这么奇怪，烦人得很。

2026-03-27 04:01