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>

<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>

<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>

<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>

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

<script>
export default