vue怎么阻止事件冒泡

如何使用 Vue 阻止事件冒泡

在 Vue.js 中，阻止事件冒泡有两种主要方法：

方法 1：使用 event.stopPropagation

在事件处理函数中，使用 event.stopPropagation() 方法可以防止该事件进一步向祖先元素传播。

立即学习“前端免费学习笔记（深入）”；

methods: {  handleClick(event) {    event.stopPropagation();    // 此事件将不会冒泡到父元素  }}

方法 2：使用 $event.native.stopImmediatePropagation

$event.native 对象提供了指向原生 DOM 事件对象的引用。使用 stopImmediatePropagation 方法可以在该对象上立即停止事件冒泡。

methods: {  handleClick(event) {    event.$event.native.stopImmediatePropagation();    // 此事件将不会冒泡到任何元素  }}

何时使用 stopImmediatePropagation

当您需要防止事件传播到任何父元素（而不仅仅是直系祖先元素）时，可以使用 stopImmediatePropagation。

示例：

以下示例演示如何使用 stopPropagation 阻止按钮点击事件冒泡到父容器：

<template><div>    <button>点击我</button>  </div></template><script>export default {  methods: {    handleClick(event) {      event.stopPropagation();      console.log('按钮被点击了');    }  }};</script>