Vue学习笔记:冒泡事件及如何阻止冒泡
2018/8/6 17:04:53
冒泡事件
   <div id="app">        <div @click="bubbleTwo()">            <input type="button" value="按钮"  @click="bubbleOne()">        </div>    </div>
new Vue({    el:'#app',    data:{    },    methods:{        bubbleOne:function(){            alert(1);        },        bubbleTwo:function(){            alert(2);        }    } });

结果是: 点击按钮会依次弹出1和2

阻止冒泡方法一
   <div id="app">        <div @click="bubbleTwo()">            <!-- 这里的bubbleOne函数我们先给他一个形参$event -->            <input type="button" value="按钮"  @click="bubbleOne($event)">        </div>    </div>
new Vue({    el:'#app',    data:{    },    methods:{        bubbleOne:function(event){            alert(1);            event.cancelBubble=true;   //阻止冒泡行为第一种方法        },        bubbleTwo:function(){            alert(2);        }    } });

结果是: 点击按钮只会触发bubbleOne函数弹出的1

阻止冒泡方法二
   <div id="app">        <div @click="bubbleTwo()">            <!-- 阻止冒泡第二种方法  把对应的html标签中的事件函数换成 @click.stop="这里是不需要冒泡的对应的事件名称()" -->            <!-- 原来的 -->            <!-- <input type="button" value="按钮"  @click="bubbleOne($event)"> -->            <!-- 现在阻止冒泡的 -->            <input type="button" value="按钮" @click.stop="bubbleOne()">        </div>    </div>
new Vue({    el:'#app',    data:{    },    methods:{        bubbleOne:function(event){            alert(1);        },        bubbleTwo:function(){            alert(2);        }    } });

结果和上面一样: 点击按钮只会触发bubbleOne函数弹出的1


猜你喜欢

发表评论

标签云
返回顶部图片