Vue 阻止事件冒泡

转载自 Vue2学习笔记:事件对象、事件冒泡、默认行为

1.事情对象

<!DOCTYPE html>
<html>
<head><title></title><meta charset="utf-8"><script src="http://unpkg.com/vue/dist/vue.js"></script><script type="text/javascript">window.onload = function(){var vm = new Vue({el:'#box',methods:{show:function(event){console.log(event);   //event   这个就是事件对象了
                    }}});}</script>
</head>
<body><div id="box"><input type="button" value="按钮" @click="show($event)"> </div>
</body>
</html>

通过show($event)把事件对象传到方法里

2.事件冒泡

<!DOCTYPE html>
<html>
<head><title></title><meta charset="utf-8"><script src="http://unpkg.com/vue/dist/vue.js"></script><script type="text/javascript">window.onload = function(){var vm = new Vue({el:'#box',methods:{show:function(){alert(1);},show1:function(){alert(2);}}});}</script>
</head>
<body><div id="box"><div @click="show1()"><input type="button" value="按钮" @click="show()"> </div></div>
</body>
</html>

点击按钮的话他会，执行show ,show1方法，依次弹出1，2。

怎么来阻止

<1> 利用我们上面讲过的event对象: event.cancelBubble = true; //这种就阻止了

<!DOCTYPE html>
<html>
<head><title></title><meta charset="utf-8"><script src="http://unpkg.com/vue/dist/vue.js"></script><script type="text/javascript">window.onload = function(){var vm = new Vue({el:'#box',methods:{show:function(event){alert(1);event.cancelBubble = true;},show1:function(){alert(2);}}});}</script>
</head>
<body><div id="box"><div @click="show1()"><input type="button" value="按钮" @click="show($event)"> </div></div>
</body>
</html>

<2>利用vue的方法阻止冒泡：给HTML元素绑定click事件的时候，改为@click.stop="show()"

<!DOCTYPE html>
<html>
<head><title></title><meta charset="utf-8"><script src="http://unpkg.com/vue/dist/vue.js"></script><script type="text/javascript">window.onload = function(){var vm = new Vue({el:'#box',methods:{show:function(event){alert(1);//event.cancelBubble = true;
                    },show1:function(){alert(2);}}});}</script>
</head>
<body><div id="box"><div @click="show1()"><input type="button" value="按钮" @click.stop="show()"> </div></div>
</body>
</html>

3.默认行为

比如contextmenu右键菜单

<!DOCTYPE html>
<html>
<head><title></title><meta charset="utf-8"><!-- // <script src="vue.js"></script> --><script src="http://unpkg.com/vue/dist/vue.js"></script><script type="text/javascript">window.onload = function(){var vm = new Vue({el:'#box',methods:{show:function(){alert(1);},show1:function(){alert(2);}}});}</script>
</head>
<body><div id="box"><input type="button" value="按钮" @contextmenu="show()"> <input type="button" value="按钮1" @contextmenu.prevent="show1()"> <p>//按钮右击点下去会依次出现 弹窗 1， 还有右击的默认菜单</p><p>//按钮1右击只出现 弹窗 2</p></div>
</body>
</html>

Vue 阻止事件冒泡相关推荐

Js、Vue阻止事件冒泡行为
目录 Js阻止事件冒泡行为 Vue阻止事件冒泡行为以下是Js阻止事件冒泡行为 event.stopPropagation() <!DOCTYPE html> <html lang= ...
vue 阻止事件冒泡和捕获
vue 阻止事件冒泡和捕获 @click.stop : 阻止事件冒泡 @click.prevent : 阻止事件默认行为 @click.self : 事件只作用在元素本身,而不是其子元素
vue 阻止事件冒泡，捕获方法
要想了解 VUE 阻止事件冒泡和捕获方法,首先要了解一下 JS 事件和 JS 阻止事件冒泡,捕获方法 1. js 事件的三阶段捕获阶段目标阶段:执行当前对象的事件处理程序冒泡阶段 2. js 阻 ...
Vue阻止事件冒泡的两种方式
1.阻止事件冒泡方式1 如下有父子标签的点击事件在子类中调用stopPropagation()方法即可禁止事件的传递 boxClick:function () {alert("父标签被点击 ...
vue中阻止事件冒泡
vue阻止事件冒泡问题描述: 使用的element-ui的dialog对话框,在对话框的父组件还有点击事件,点击dialog对话框时也会相应外部父组件的点击事件. <el-dialogtitl ...
JS、Vue、React阻止事件冒泡及阻止默认事件
JS阻止事件冒泡及阻止默认事件解决方案: 1.event.preventDefault -- 阻止默认 Event 接口的 preventDefault()方法,告诉user agent:如果此事件没 ...
Vant 步进器 van-stepper 阻止事件冒泡
一般情况下 Vue 阻止事件冒泡用 .stop 即可解决 Vue 阻止事件默认行为用 .prevent 解决今天这里是介绍 Vant 框架里写购物车,需求是购物车中的商品点击也可以进入到商品详情,于 ...
Vue和Js的阻止事件冒泡和阻止默认事件方法
原生js取消事件冒泡 try{e.stopPropagation();//非IE浏览器}catch(e){window.event.cancelBubble = true;//IE浏览器} 原生js阻 ...
VUE中如何阻止事件冒泡
当父子元素中都有点击事件的时候,为了让触发子元素中的事件时,不去触发父元素中的事件,可以在子元素事件中添加stop来阻止事件冒泡. 如图,在button的点击事件中加上stop,触发addStatus ...

Vue 阻止事件冒泡

Vue 阻止事件冒泡相关推荐

最新文章

热门文章