vue中事件修饰符详解

事件修饰符

.stop 阻止事件冒泡

由于事件冒泡，我们给元素绑定事件的时候，也会触发父级绑定的相应事件；.stop 相当于调用了 event.stopPropagation 方法。

<template>
	<div @click="onClick('parent')">
		<div @click="onClick('child')"></div>
	</div>
</template>
<script>
export default {
	methods: {
		onClick(params) {
			console.log(params)
		}
	}
}
// child
// parent
</script>

使用 .stop

<template>
	<div @click="onClick('parent')">
		<div @click.stop="onClick('child')"></div>
	</div>
</template>
<script>
export default {
	methods: {
		onClick(params) {
			console.log(params)
		}
	}
}
// child
</script>

.prevent 阻止事件的默认行为

用于阻止事件的默认行为。例如：当你使用a标签时，很多时候我们给a标签一个href="#" 同时又给a标签添加了一个click 方法，个别浏览器就会出现问题; 相当于调用了event.preventDefault 方法。

<template>
	<a href="javascript:console.log('href触发了')" @click="onClick">我就是一个a标签</a>
</template>
<script>
export default {
	methods: {
		onClick() {
			console.log('click事件触发了');
		}
	}
}
// click事件触发了
// href触发了
</script>

使用 .prevent

<template>
	<a href="javascript:console.log('href触发了')" @click.prevent="onClick">我就是一个a标签</a>
</template>
<script>
export default {
	methods: {
		onClick() {
			console.log('click事件触发了');
		}
	}
}
// click事件触发了
</script>

PS：使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

.once 只触发一次

使用此修饰符后，该事件只会触发一次。

<template>
	<button @click.once="onClick">ok</button>
</template>
<script>
export default {
	data() {
		return {
			count: 0
		}
	},
	methods: {
		onClick() {
			console.log(++this.count)
		}
	}
}
// 1
</script>

.self 点击元素本身触发

只有当触发事件的元素，是绑定事件的自身元素时，才会触发回调。self 意味着’自己、本身’。

<template>
	<div @click.self="onClick('我是div')">
		我是div
		<button @click="onClick('我是button')">我是button</button>
	</div>
</template>
<script>
	export default{
		methods: {
			onClick(str) {
				console.log(str);
			}
		}
	}
</script>

当点击 button 后打印 我是button，但是并不会打印出 我是div 。PS： 不明白的小伙伴，看上面的 .stop 修饰符示例。

当我们使用 .self 修饰符后，点击 button 时并不会触发父元素的 onClick 事件。只有点击父元素 div(我是div) 时，才会打印出 我是div 。

.capture 向下捕获

javascript 的事件机制为： 捕获 => 目标 => 冒泡。

默认的事件触发为从目标开始向上冒泡。

当使用 .capture 修饰符后，就反转过来了，事件触发从包含这个元素的顶层开始往下触发。

<template>
	<div @click="onClick('我是一爹')">
		parent1
		<div @click.capture="onClick('我是二爹')">
			parent2
			<div @click="onClick('我是三爹')">
				parent3
				<div @click="onClick('我是儿子')">
					child
				</div>
			</div>
		</div>
	</div>
</template>
<script>
export default{
	methods: {
		onClick(str) {
			console.log(str);
		}
	}
}
// 我是二爹
// 我是儿子
// 我是三爹
// 我是一爹
</script>

从上面示例中我们可以看出，当我们点击 child的时候，优先触发的是捕获阶段的 二爹，然后触发的是目标的 儿子 ，最后触发的是从内到外冒泡的 三爹 、 一爹 。

.native 转化为原生事件

当我们使用第三方组件，或自定义组件时，很多时候可能组件并没有定义一些我们需要的事件，例如：

<template>
	<div>child组件，没有任何事件</div>
</template>

<script>
  export default {
    name: "",
	data() {
      return {}
	}
}
</script>

引入组件后，我们想点击这个 child 组件后，得到反馈，于是我们给 child 添加 click 事件：

<template>
	<child @click="onClick"/>
</template>
<script>
import Child from ...
export default {
	components: {
		Child
	},
	methods: {
		onClick() {
			console.log('我被点击了');
		}
	}
}
</script>

此时，当我们点击 child 组件时，没有任何的反应，因为在组件内部，我们没有触发 click 事件，所以父组件引用 child 后，是没有办法监听到子组件被触发的 click 事件的。

所以，当我们使用 .native 修饰符后:

<template>
	<child @click.native="onClick"/>
</template>
<script>
import Child from ...
export default {
	components: {
		Child
	},
	methods: {
		onClick() {
			console.log('我被点击了');
		}
	}
}
// 我被点击了
</script>

相当于我们将组件变成了一个普通的html标签，然后我们给这个标签添加了一个 onclick 事件。注意：使用.native修饰符来操作普通HTML标签是会令事件失效的

.passive 滚动事件延迟

我们在监听元素滚动事件的时候，会一直触发 onscroll ,在PC端的时候，是没什么问题的，但是在移动端的时候，会变卡。

因此，我们需要使用 .passive 修饰符，来提升移动端的性能：

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

PS：不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住， .prevent 会告诉浏览器你不想阻止事件的默认行为。