Vue阻止事件冒泡详解

发布时间：2023-05-17

Vue 阻止事件冒泡的方法

在 Vue 中，我们经常会遇到需要阻止事件冒泡的情况，比如当一个父组件里面包含多个子组件，点击子组件时不希望触发父组件的点击事件，这时就需要使用到阻止事件冒泡的方法。本文将从多个方面介绍 Vue 阻止事件冒泡的方法。

一、阻止事件冒泡的方法

1. event.stopPropagation()

当一个组件嵌套在另一个组件中，当你点击内部组件时，父组件的点击事件也会被触发。这时候我们就需要阻止事件冒泡，让内部组件的点击事件不再向外传播。Vue 提供了一个方法：event.stopPropagation()。

<template>
  <div class="parent" @click="handleParentClick">
    <div class="child" @click.stop="handleChildClick">子组件</div>
  </div>
</template>
<script>
export default {
  methods: {
    handleParentClick() {
      console.log('我是父组件')
    },
    handleChildClick(event) {
      event.stopPropagation()
      console.log('我是子组件')
    }
  }
}
</script>

上面的代码中，当点击子组件时，由于使用了 .stop 修饰符，所以事件不再继续向上传播，只触发了子组件的点击事件。

2. event.cancelBubble

除了使用 stopPropagation() 方法外，还可以使用 event 对象的 cancelBubble 属性，设置为 true 表示禁止事件冒泡。

<template>
  <div class="parent" @click="handleParentClick">
    <div class="child" @click="handleChildClick">子组件</div>
  </div>
</template>
<script>
export default {
  methods: {
    handleParentClick() {
      console.log('我是父组件')
    },
    handleChildClick(event) {
      event.cancelBubble = true
      console.log('我是子组件')
    }
  }
}
</script>

上面的代码和第一个例子类似，不同的是，这里使用了 cancelBubble 属性来阻止事件冒泡。

二、Vue 阻止事件冒泡的修饰符

Vue 提供了一些修饰符来方便我们使用阻止事件冒泡的方法。

1. .stop

stop 修饰符可以和 @click、@mousedown、@mouseup 一起使用，表示阻止事件继续传播。

<template>
  <div class="parent" @click="handleParentClick">
    <div class="child" @click.stop="handleChildClick">子组件</div>
  </div>
</template>
<script>
export default {
  methods: {
    handleParentClick() {
      console.log('我是父组件')
    },
    handleChildClick(event) {
      console.log('我是子组件')
    }
  }
}
</script>

上面的代码中，当点击子组件时，由于使用了 .stop 修饰符，所以事件不再继续向上传播，只触发了子组件的点击事件。

2. .prevent

prevent 修饰符可以和 @click、@mousedown、@mouseup 一起使用，表示阻止默认事件并阻止事件继续传播。

<template>
  <div class="parent" @click.prevent="handleParentClick">
    <div class="child" @click.prevent.stop="handleChildClick">子组件</div>
  </div>
</template>
<script>
export default {
  methods: {
    handleParentClick() {
      console.log('我是父组件')
    },
    handleChildClick(event) {
      console.log('我是子组件')
    }
  }
}
</script>

上面的代码中，当点击子组件时，由于使用了 .prevent.stop 修饰符，所以阻止了默认事件并且阻止了事件继续传播。

3. .self

self 修饰符可以和 @click 一起使用，表示只有当点击的是该元素本身时才触发事件。

<template>
  <div class="parent" @click="handleParentClick">
    <div class="child" @click.self="handleChildClick">子组件</div>
  </div>
</template>
<script>
export default {
  methods: {
    handleParentClick() {
      console.log('我是父组件')
    },
    handleChildClick(event) {
      console.log('我是子组件')
    }
  }
}
</script>

上面的代码中，当点击子组件时，由于使用了 .self 修饰符，所以只有当点击的是该元素本身时才触发事件。

三、Vue 阻止事件向下传递

有时候我们并不需要阻止事件冒泡，而是希望父组件接收到点击事件，但是子组件不需要再向下传递事件。Vue 提供了一个修饰符：.capture。

<template>
  <div class="parent" @click.capture="handleParentClick">
    <div class="child" @click="handleChildClick">子组件</div>
  </div>
</template>
<script>
export default {
  methods: {
    handleParentClick() {
      console.log('我是父组件')
    },
    handleChildClick(event) {
      console.log('我是子组件')
    }
  }
}
</script>

上面的代码中，当点击子组件时，事件先被捕获到父组件，父组件的点击事件被触发，之后事件继续向下传递，子组件的点击事件也被触发。

四、Vue 阻止事件捕获的方法

Vue 提供了一个 .stop 事件修饰符，可以用来阻止事件的捕获过程。

<template>
  <div class="parent" @click.capture.stop="handleParentClick">
    <div class="child" @click="handleChildClick">子组件</div>
  </div>
</template>
<script>
export default {
  methods: {
    handleParentClick() {
      console.log('我是父组件')
    },
    handleChildClick(event) {
      console.log('我是子组件')
    }
  }
}
</script>

上面的代码中，当点击子组件时，事件先被捕获到父组件，但使用了 .stop 修饰符后，事件不再向下传播，只触发了父组件的点击事件。

五、Vue 阻止冒泡和默认事件

.stop 和 .prevent 同时使用可以同时阻止事件冒泡和默认事件。

<template>
  <a href="https://www.google.com" class="link" @click.prevent.stop="handleClick">Google</a>
</template>
<script>
export default {
  methods: {
    handleClick() {
      console.log('点击了<a>标签')
    }
  }
}
</script>

上面的代码中，当点击 a 标签时，同时阻止了事件冒泡和默认事件（跳转到 google.com），只触发了 click 事件。

六、Vue click 阻止事件冒泡

除了 @click，Vue 还提供了一些点击事件的缩写：@mousedown、@mouseup、@click。这些事件都可以使用 .stop 修饰符来防止事件冒泡。

<template>
  <div class="parent" @click="handleParentClick">
    <div class="child" @mousedown.stop="handleChildClick">子组件</div>
  </div>
</template>
<script>
export default {
  methods: {
    handleParentClick() {
      console.log('我是父组件')
    },
    handleChildClick() {
      console.log('我是子组件')
    }
  }
}
</script>

上面的代码中，当按下子组件时，事件不再继续向上传播，只触发了子组件的 mousedown 事件。

七、Vue 阻止冒泡和捕获

.stop 和 .capture 同时使用可以同时阻止事件冒泡和事件捕获。

<template>
  <div class="parent" @click.capture.stop="handleParentClick">
    <div class="child" @click="handleChildClick">子组件</div>
  </div>
</template>
<script>
export default {
  methods: {
    handleParentClick() {
      console.log('我是父组件')
    },
    handleChildClick() {
      console.log('我是子组件')
    }
  }
}
</script>

上面的代码中，当点击子组件时，事件先被捕获到父组件，但是使用了 .stop 和 .capture 修饰符后，事件不再向下传播，只触发了父组件的点击事件。

八、Vue 阻止冒泡是怎么实现的

当阻止事件冒泡时，Vue 会针对该元素绑定一个事件处理函数，该事件处理函数的作用是：当事件发生后，先执行元素本身的事件处理函数（如 @click），然后执行 Vue 绑定的事件处理函数。Vue 会在事件发生时，判断当前事件是不是由该元素触发的，如果是，则执行元素本身的事件处理函数，否则执行 Vue 绑定的事件处理函数。这样就达到了阻止事件冒泡的效果。

九、Vue 点击事件阻止冒泡

除了使用阻止事件冒泡的方法外，还可以使用 @click.stop 阻止事件冒泡。

<template>
  <div class="parent" @click="handleParentClick">
    <div class="child" @click.stop="handleChildClick">子组件</div>
  </div>
</template>
<script>
export default {
  methods: {
    handleParentClick() {
      console.log('我是父组件')
    },
    handleChildClick() {
      console.log('我是子组件')
    }
  }
}
</script>

上面的代码中，当点击子组件时，事件不再继续向上传播，只触发了子组件的点击事件。

十、Vue 阻止默认事件的指令

除了 .prevent 修饰符外，Vue 还提供了一个指令 v-on:submit.prevent，用来阻止表单提交的默认事件。

<template>
  <form @submit.prevent="handleSubmit">
    <input type="text" v-model="inputValue" />
    <button type="submit">提交</button>
  </form>
</template>
推荐文章