2021-07-29 vue事件冒泡和事件捕获,阻止冒泡和阻止浏览器默认行为

0.概要

1.阻止冒泡:@click.stop=‘fn’
2.阻止浏览器的默认行为:@click.prevent=‘fn’
3.事件捕获:@click.capture=‘fn’

1.事件冒泡和事件捕获

1.1.事件冒泡例子

html:

<div id="app">
	<div id="car" @click="type('车')">
		<div id="benzcar" @click="type('奔驰车')">div>
	div>
div>

script:

var app = new Vue({
	el: '#app',
	methods:{
		type(n){
			console.log("我是",n);
		}
	}
})

结果:
点击子元素,子元素和父元素都会输出

15:44:57.505 我是 奔驰车 at .index.html:43
15:44:57.989 我是 车 at index.html:43

1.2.事件捕获例子

事件冒泡的反过程就是事件捕获
(冒泡:最内层的元素开始发生，一直向上传播，直到document对象;
捕获:从document对象开始发生)
html:

<div id="app">
	<div id="car" @click.capture="type('车')">
		<div id="benzcar" @click.capture="type('奔驰车')">div>
	div>
div>

结果:
不同于冒泡是先输入子元素再输出父元素,事件捕获是先输出父元素再输出子元素

17:14:59.753 我是 车 index.html:46
17:14:59.757 我是 奔驰车 index.html:46

2.阻止冒泡和阻止默认行为

例子

html:

<div id="app">
	<div id="car" @click.stop="type('车')">
		<div id="benzcar" @click.stop="type('奔驰车')">
			<a @click.stop.prevent="type('a')" href="https://www.baidu.com">百度一下a>
		div>
	div>
div>

结果:
1.点击子元素,父元素不输出
2.点击a标签不发生跳转