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

文章目录

0.概要1.事件冒泡和事件捕获1.1.事件冒泡例子1.2.事件捕获例子2.阻止冒泡和阻止默认行为例子

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:4315: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:4617: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="">百度一下</a></div></div></div>

结果:

1.点击子元素,父元素不输出

2.点击a标签不发生跳转

如果觉得《-07-29 vue事件冒泡和事件捕获 阻止冒泡和阻止浏览器默认行为》对你有帮助，请点赞、收藏，并留下你的观点哦！