Vue事件修饰符

Vue事件修饰符

• .stop：阻止冒泡
• .capture：捕获出发事件
• .prevent：阻止事件默认行为
• capture：实现捕获触发事件的机制
• once：事件只触发一次

//使用.self 实现只有点击当前元素，才会触发事件处理函数,阻止当前元素
<div class = "inner" @click.once = "divHandler">
	<input type="button" value="戳他" @click = "btnHanlder"></input>
</div>

//使用.stop 阻止冒泡
<div class = "inner" @click.stop = "divHandler">
	<input type="button" value="戳他" @click = "btnHanlder"></input>
</div>

//使用.capture：实现捕获触发事件
<div class = "inner" @click.capture = "divHandler">
	<input type="button" value="戳他" @click = "btnHanlder"></input>
</div>

//使用.once 只触发一次
	<input type="button" value="戳他" @click.prevent.once = "btnHanlder"></input>

//使用.prevent 阻止默认事件
<div class = "inner" @click.stop = "divHandler">
	<input type="button" value="戳他" @click = "btnHanlder"></input>
</div>