好资源导航 » 文章资讯 » vue2.0的contextmenu右键弹出菜单的实例代码

vue2.0的contextmenu右键弹出菜单的实例代码

2023-09-27 16:33:05 59

整理文档，搜刮出一个vue2.0的contextmenu右键弹出菜单的实例代码，稍微整理精简一下做下分享。

1.事情对象









window.onload=function(){
varvm=newVue({
el:'#box',
methods:{
show:function(event){
console.log(event);//event这个就是事件对象了
}
}
});
}

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

2.事件冒泡









window.onload=function(){
varvm=newVue({
el:'#box',
methods:{
show:function(){
alert(1);
},
show1:function(){
alert(2);
}
}
});
}

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

怎么来阻止

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









window.onload=function(){
varvm=newVue({
el:'#box',
methods:{
show:function(event){
alert(1);
event.cancelBubble=true;
},
show1:function(){
alert(2);
}
}
});
}

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









window.onload=function(){
varvm=newVue({
el:'#box',
methods:{
show:function(event){
alert(1);
//event.cancelBubble=true;
},
show1:function(){
alert(2);
}
}
});
}

3.默认行为

比如contextmenu右键菜单










window.onload=function(){
varvm=newVue({
el:'#box',
methods:{
show:function(){
alert(1);
},
show1:function(){
alert(2);
}
}
});
}







//按钮右击点下去会依次出现弹窗1，还有右击的默认菜单
//按钮1右击只出现弹窗2

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

vue2.0的contextmenu右键弹出菜单的实例代码

热门推荐

随机推荐