<div id="app">
<div class="inner" @click="divClick">
<input type="button" value="点我" @click.stop="btnClick">
</div>
</div>
<script>
// .prevent 阻止默认事件 比如a标签的跳转
// .stop 阻止事件冒泡
// .capture 添加事件侦听器时使用事件捕获模式 事件默认按照冒泡的顺序触发,添加capture后,事件就会按照捕获的顺序触发。【注意:capture修饰符一定要写在外层才生效!】
// .self 只当事件在该元素本身触发时才会触发 【比如如果给父元素的点击事件添加.self修饰符,当子元素发生点击事件后,会冒泡到父元素,但由于冒泡触发的事件不是由父元素本身触发的,所以添加.self后父元素的方法不会被执行】
// .once 事件只触发一次 【当@click.one="func",不管点击多少次,func函数只会触发一次】
var vm = new Vue ({
el: "#app",
data: {
},
methods:{
divClick() {
console.log('div');
},
btnClick() {//点击input,会触发btnClick,接着事件冒泡,会触发父元素的divClick。通过事件修饰符.stop阻止事件冒泡
console.log('input');
}
}
})
</script>
冒泡模式:事件从子组件向父组件逐层传递。
捕获模式:自顶向下。事件从父组件向子组件逐层传递