一个div内部有button按钮
当点击按钮时 先执行按钮对应的事件 通过冒泡被动触发外部div对应的事件 再执行外部div对应的事件
- 当使用事件修饰符 .stop 会阻止冒泡事件** 即点击内部的button 执行对应事件后 会阻止外部事件的发生**
<div class="inner" v-on:click="divHandler">
<input type="button" value="内部的button" @click.stop='btnHandler'>
</div>
- 使用 .prevent 阻止默认行为
<a href="http://www.baidu.com" @click.prevent="linkHandler">有问题,先去百度</a>
会执行事件对应的函数 但不会跳转页面
- 使用 .capture 捕获触发事件 (捕获最外部的元素对应的事件 依次向内执行)
.capture写在需要捕获的事件对应的元素上
点击内部button时 先执行外部div对应的事件 再执行内部元素对应的事件
<div class="inner" v-on:click.capture="divHandler">
<input type="button" value="内部的button" @click.stop='btnHandler'>
</div>
- 事件修饰符 .self 只有当点击元素本身时 才会触发事件处理函数
<div class="inner" v-on:click.self="divHandler">
<input type="button" value="内部的button" @click.stop='btnHandler'>
</div>