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('点击了标签')
    }
  }
}
</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>
<script>
export default 
                                                        原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/198385.html