事件修饰符
# 放在事件后的
@click.once='函数'
.stop 只处理自己的事件，不再冒泡给父标签（阻止事件冒泡）
.self 只处理自己的事件，子控件冒泡的事件不处理
.prevent 阻止a链接的跳转
.once 事件只会触发一次（适用于抽奖页面）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<h1>点击子标签，父标签的事件也触发：事件冒泡</h1>
<h2>阻止事件冒泡：点子标签，父标签不触发 stop</h2>
<ul @click="handleUl">
<!-- 阻止冒泡-->
<li @click.stop="handleLi">111111</li>
<!-- 没阻止冒泡-->
<li @click="handleLi">222222</li>
</ul>
<h1>点击子标签，父标签的事件也触发：事件冒泡</h1>
<h2>子标签的冒泡不处理：父标签写self，父标签只处理自己的事件，冒泡的事件不管</h2>
<ul @click.self="handleUl">
<!-- 阻止冒泡-->
<li @click="handleLi">111111</li>
<!-- 没阻止冒泡-->
<li @click="handleLi">222222</li>
</ul>
<h1>prevent 阻止a链接的跳转</h1>
<a href="http://www.aaa.top" @click.prevent="handleA">aaaaaa</a>
<h1>once 只执行一次</h1>
<button @click.once="handleButton">点我</button>
</div>
</body>
<script>
const app = Vue.createApp({
data() {
return {}
},
methods: {
handleLi(){
console.log('li')
},
handleUl(){
console.log('Ul')
},
handleA(){
console.log('a')
},
handleButton(){
console.log('button')
}
}})
app.mount("#app")
</script>
</html>
本文作者：Sherwin
本文链接：https://www.cnblogs.com/sherwin1995/p/16810675.html
版权声明：本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步