vue2.0的contextmenu右键菜单
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>
vue2.0的contextmenu右键菜单的更多相关文章
- 3种不同的ContextMenu右键菜单演示
简单使用的右键菜单,希望能帮助大家.下面是截图和实例代码 实例预览 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/ ...
- [xPlugins] jQuery Contextmenu右键菜单
[2012-04-12] Contextmenu 右键菜单 v0.1 版本发布 [功能] 在特定区域弹出右键菜单 [功能] 可以在弹出右键菜单区域内,再屏蔽某个小区域. [功能] 有两种方式添加右键菜 ...
- WPF中ContextMenu(右键菜单)使用Command在部分控件上默认为灰色的处理方法
原文:WPF中ContextMenu(右键菜单)使用Command在部分控件上默认为灰色的处理方法 问题描述 今天发现如果我想在一个TextBlock弄一个右键菜单,并且使用Command绑定,结果发 ...
- JQuery之ContextMenu(右键菜单)
插件下载地址:http://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextmenu.r2.js压缩版:http://www.tre ...
- contextMenu,右键菜单
<!DOCTYPE html> <html> <head> <title>ContextMenu Event Example</title> ...
- Bootstrap 树形列表与右键菜单
Bootstrap 树形列表与右键菜单 介绍两个Bootstrap的扩展 Bootstrap Tree View 树形列表 jQuery contextMenu 右键菜单 Demo采用CDN分发,直接 ...
- ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室（六） 之 Layim源码改造右键菜单--好友、组管理功能的实现。
前言 上一篇中讲解了加好友的流程,本篇将介绍好友管理,群组管理的右键菜单功能.当然由于菜单项目太多,都实现也得花费时间.只讲解一下我是如何从不知道怎么实现右键菜单到会自定义菜单的一个过程.另外呢,针对 ...
- jQuery右键菜单contextMenu使用实例
在最近项目中需要频繁的右键菜单操作.我采用了contextMenu这款jQuery插件. 参考网址:http://www.jb51.net/article/58709.htm 官网demo http: ...
- Jquery 右键菜单(ContextMenu)插件使用记录
目前做的项目需要在页面里面用右键菜单,在网上找到两种jquery的右键菜单插件,但是都有各种问题.所以就自己动手把两种插件结合了下. 修改后的右键菜单插架可以根据绑定的触发页面元素不同,复用同一个菜单 ...
随机推荐
- CreateDialog 注意事项
CreateDialog创建非模态对话框时 其内部 会发送几条消息例如: WM_INITDIALOG,WM_SETFONT DS_SETFONT , DS_SHELLFONT. 所以如果在另一个Ca ...
- Fisher准则一维聚类
在做FAQ系统时,用户输入一个查询之后,返回若干个打好分数的文档.对于这些文档,有些是应该输出的,有些是不应该输出的.那么应该在什么地方截断呢? 这个问题其实是一个聚类问题,在一维空间中把若干个点聚成 ...
- iOS应用之间的跳转
app应用跳转的原理解析 如何实现两个app应用之间的跳转 如何实现两个app之间跳转到指定界面 二.应用跳转原理 相信从一个应用跳转到另一个应用大家并不陌生,最常见的莫过于第三方登录,支付宝支付等等 ...
- 进阶之路（基础篇） - 022 Arduino Leonardo 中文介绍（摘抄）
本文摘抄:http://www.arduino.cn/thread-1205-1-1.html 概述Arduino Leonardo是基于ATmega32u4一个微控制器板.它有20个数字输入/输出引 ...
- C# WinForm开发系列 - DataGrid/DataGridView
在WinForm开发中,DataGrid/DataGridView被广泛使用于绑定数据库中数据进行呈现.整理一些关于DataGrid/DataGridView使用的文章,涉及DataGrid/Data ...
- C# 连接 mySQL 出现 GUID 应包含带 4 个短划线的 32 位数 问题
C# 连接 mySQL 出现 GUID 应包含带 4 个短划线的 32 位数 问题 在连接字符串中加入 Old Guids=true; 如:server=localhost;userid=root;p ...
- mongodb及mongoclient在win7下的编译和使用
1.导言 折腾mongodb几个小时最终有结果了.呃.如今就简单总结一下. 事实上我的需求非常easy,就是在C++代码中调用mongodb的库函数.也就是要得到mongoclient.lib.本来想 ...
- ios app: 使用企业license设置发布app的过程
ios开发者证书与企业证书的内容,关系,以及ios app 使用企业license设置发布app的过程 iOS是一个非常封闭的系统.授权文件(.mobileprovision)和签名证书文件(.c ...
- spring 下载
Spring官网(https://spring.io/)改版后,直接下载Jar包的链接,下面汇总 1.直接输入地址,改相应版本即可:http://repo.springsource.org/libs- ...
- gitlab runner 配置
gitlab runnerhttps://scarletsky.github.io/2016/07/29/use-gitlab-ci-for-continuous-integration/https: ...