vue事件修饰符（阻止事件冒泡、阻止默认事件....）_vue preventdefault()用途

这应该是vue提供给程序员的语法糖确实很好用。官方说法是：

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。（双手双脚赞同）

这也能让函数看着更干净，爽就完了！

• .stop（阻止事件冒泡）
• .prevent（阻止默认事件）
• .capture（子元素触发事件，需先触发父元素事件，再执行子元素的事件）
• .self（可以理解为跳过冒泡事件和捕获事件，只有直接作用在该元素上的事件才可执行）
• .once（事件只触发一次）
• .passive（不会阻止默认行为）

<div id="vue">
			<div class="box1" @click="box(1)">
			
				<div class="box2" @click="box(2)">
				
					<div class="box3" @click="box(3)">
						
					</div>
					
				</div>
				
			</div>
		</div>
<script>
			const vue=new Vue({
				el:"#vue",
				data:{},
				methods:{
					box:function(that){
						console.log(that);
					}
				}
			})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

stop：

阻止事件冒泡，在js中都是要在函数里写e.stopPropagation()，在vue中用法：@click.stop="box3()"

prevuet:

阻止默认事件

<a href="2.html" @click.prevent="box(2)">阻止默认事件</a>//a标签将不再跳转并输出2
or
<a href="2.html" @click.prevent>阻止默认事件</a>//不触发事件的写法，可以单写，以上属性都可以单写
1
2
3

capture:

相当于是事件捕获把，在子元素触发时，先执行父元素的事件，再执行子元素事件

<div class="box1" @click.capture="box(1)">
				<div class="box2" @click.capture="box(2)">
					<div class="box3" @click="box(3)">
						
					</div>
				</div>
			</div>
1
2
3
4
5
6
7

上面代码输出123，如果box2没有capture修饰符输出结果是132，这说明执行完父元素事件后再执行子元素的事件也会向上冒泡

self:

跳过冒泡事件： 如第一个代码块，如果点击box3，会依次冒泡在控制台输出，321。现在给box2加上@click.self="box2()"这时候点box3输出的是31，越过了box2的事件。
跳过捕获事件：

<div class="box1" @click.capture="box(1)">
				<div class="box2" @click.capture="box(2)">
					<div class="box3" @click="box(3)">
						
					</div>
				</div>
			</div>
1
2
3
4
5
6
7

这时候点box3输出123，但给box2加上@click.capture.self="box2()"后输出的是1，3，当然没人会写了capture还加上self
说半天就是，只能点自己才可以触发事件

once:

表示此事件或修饰符只执行一次

<div id="vue">
			<div class="box1" @click="box(1)">
			
				<div class="box2" @click="box(2)">
				
					<div class="box3" @click.stop.once="box(3)">
						
					</div>
					
				</div>
				
			</div>
		</div>
1
2
3
4
5
6
7
8
9
10
11
12
13

以上代码，点box3控制台只输出3，因为也阻止了事件冒泡，第二次点击时输出21，不仅事件被移除，阻止冒泡修饰符也失去效果（修饰符可串联，需要注意会有顺序问题）。

passive:

告诉浏览器这个监听事件没有阻止默认事件，放心执行。
这个属性不是多此一举，是属于代码优化，多用于移动端的touchmove，pc端的wheel，可以参考这篇文章
与prevent修饰符串联会出错哦