vue阻止事件冒泡

墨蓝 2022-05-28 12:25 267阅读 0赞

vue事件修饰

*  `.stop`
 *  `.prevent`
 *  `.capture`
 *  `.self`
 *  `.once`
 *  ``
    
        
        <a v-on:click.stop="doThis"></a>
        
        
        <form v-on:submit.prevent="onSubmit"></form>
        
        
        <a v-on:click.stop.prevent="doThat"></a>
        
        
        <form v-on:submit.prevent></form>
        
        
        
        <div v-on:click.capture="doThis">...</div>
        
        
        
        <div v-on:click.self="doThat">...</div>

<div id="vue">
    			<div style="width: 200px;height: 200px;background: red;" v-on:tap="tap0">
    				<button type="button" class="mui-btn mui-btn-blue" v-on:tap.stop="tap1">按钮</button>
    			</div>
    			</div>

var vue = new Vue({
    				el:"#oop",
    				data:{},
    				methods:{
    					tap0:function(){
    						alert(666)
    					},
    					tap1:function(){
    						alert(999)
    					}
    				}
    			});

点击tap1不加 .stop ：先弹出999  再弹出666

加 .stop后 就只弹出999；

事件后加修饰符后就会阻止影响默认事件

发表评论取消回复

表情：

评论列表（有 0 条评论，267人围观）

还没有评论，来说两句吧...

相关阅读

相关 Js、Vue阻止事件冒泡行为

目录 Js阻止事件冒泡行为 Vue阻止事件冒泡行为 -------------------- 以下是Js阻止事件冒泡行为 event.stopPropagatio

忘是亡心i/ 2024年04月07日 15:23/ 0 赞/ 75 阅读

相关 vue使用shop修饰符阻止事件冒泡

使用shop修饰符在点击事件中阻止事件冒泡的上一层DOM  <div id="app"> <div clas

深藏阁楼爱情的钟/ 2023年07月11日 06:21/ 0 赞/ 14 阅读

相关 Vue中怎么阻止事件冒泡

> `Vue中怎么阻止事件冒泡` <div @click="test3"> <button @click.stop="test2">点击我</

迷南。/ 2022年10月28日 10:16/ 0 赞/ 151 阅读

相关 Js 冒泡事件阻止

出于对作者的尊重和感谢，原文地址为 http://www.cnblogs.com/jams742003/archive/2009/08/29/1556187.html

Bertha 。/ 2022年09月24日 00:29/ 0 赞/ 251 阅读

相关 js阻止事件冒泡

function stopHandler(event){ window.event?window.event.cancelBubble=true:eve

古城微笑少年丶/ 2022年07月13日 00:48/ 0 赞/ 270 阅读

相关 Vue 中阻止冒泡和默认事件

使用原生的方式来阻止冒泡和默认事件很多人都知道了，而 Vue 虽然是数据驱动的 MVVM 框架，但是在项目需要的时候仍然要阻止冒泡和默认事件。一般的做法比如 <div

ゞ浴缸里的玫瑰/ 2022年06月08日 14:06/ 0 赞/ 194 阅读

相关阻止事件冒泡

事件的冒泡（Bubble） \- 所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发 \- 在开发中大部分情况冒泡都是有用的,如果

红太狼/ 2022年06月01日 07:18/ 0 赞/ 317 阅读

相关 vue阻止事件冒泡

vue事件修饰 `.stop` `.prevent` `.capture` `.self` `.once` ``

墨蓝/ 2022年05月28日 12:25/ 0 赞/ 268 阅读

相关 vue2.0阻止事件冒泡

<transition name="fade"> <div class="picker_wrap" v-s

Love The Way You Lie/ 2022年04月16日 05:20/ 0 赞/ 259 阅读

相关 vue 阻止事件冒泡

事件修饰符在事件处理程序中调用 `event.preventDefault()` 或 `event.stopPropagation()` 是非常常见的需求。尽管我们可以

墨蓝/ 2022年04月05日 12:11/ 0 赞/ 310 阅读