事件处理 | Yume Shoka = HaiLan's Blog

# 事件修饰符

	<div id="app">
	<a href="https://www.baidu.com/" @click="showInfo">点击跳转</a>
	</div>
	<script type="text/javascript">
	const vm = new Vue({
	el: '#app',
	data: {
	},
	methods:{
	showInfo(){
	alert('跳转')
	}
	}
	})
	</script>

点击 a 标签，弹出弹框，然后进行跳转。阻止 a 标签的默认行为，即阻止 a 标签的跳转，示例代码

	<div id="app">
	<a href="https://www.baidu.com/" @click="showInfo">点击跳转</a>
	</div>
	<script type="text/javascript">
	const vm = new Vue({
	el: '#app',
	data: {
	},
	methods:{
	showInfo(e){
	e.preventDefault();// 阻止默认行为
	alert('跳转')
	}
	}
	})
	</script>

也可以进行 @click 事件的阻止默认事件 @click.prevent

	<div id="app">
	<a href="https://www.baidu.com/" @click.prevent="showInfo">点击跳转</a>
	</div>
	<script type="text/javascript">
	const vm = new Vue({
	el: '#app',
	data: {
	},
	methods:{
	showInfo(e){
	alert('跳转')
	}
	}
	})
	</script>

# Vue 中事件修饰符

prevent：阻止默认事件
stop：阻止事件冒泡
once：事件只触发一次
capture：使用事件的捕获模式
self：只有 event.target 是当前操作的元素时才触发事件
passive：事件的默认行为立即执行，无需等待事件回调执行完毕

阻止事件冒泡：

e.stopPropagation();

也可以用 @click.stop

	<div id="app">
	<div @click="showInfo">
	<button @click.stop="showInfo">点击跳转</button>
	</div>
	</div>
	<script type="text/javascript">
	const vm = new Vue({
	el: '#app',
	data: {
	},
	methods:{
	showInfo(e){
	alert('跳转')
	}
	}
	})
	</script>