知识点:
1,.stop 阻止事件继续传播(冒泡)
2,.prevent阻止标签默认事件
3, .capture添加事件侦听器时使用事件捕获模式,即元素自身触发的事件先在此处处理,然后才交由内部元素进行处理
4,.self只当event.target事件在该元素本身(比如不是子元素)触发时触发回调
5,.once事件只触发一次
7,.passive 告诉浏览器你不想阻止事件的默认行为
// .stop 阻止事件继续传播(冒泡)
<body> <div id="div1" @click="btn1"> <div id="div2" @click.stop="btn2"> 你好 </div> </div> <script> var vm = new Vue({ el: "#div1", data: { }, methods: { btn1: function() { console.log('点击btn1') }, btn2: function(){ console.log('点击btn2') } } }) </script> </body>
// 给div2添加self事件修饰符,只有点击当前元素才会触事件处理函数,通过冒泡或者捕获是不会执行此事件 <div id="div1" @click="btn1"> <div id="div2" @click.self="btn2"> <a href="www.baidu.com" @click.prevent="btn3">你好</a> </div> </div>
<!--默认是冒泡行为,添加capture从外往里执行事件--> <div id="div1" @click.capture="btn1"> <div id="div2" @click="btn2"> <a href="www.baidu.com" @click.prevent="btn3">你好</a> </div> </div>
<!--.once事件只触发一次--> <div id="div1" @click.once="btn1"> <div id="div2" @click="btn2"> <a href="www.baidu.com" @click.prevent="btn3">你好</a> </div> </div>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步