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的右键菜单插件,但是都有各种问题.所以就自己动手把两种插件结合了下. 修改后的右键菜单插架可以根据绑定的触发页面元素不同,复用同一个菜单 ...
随机推荐
- Ubuntu创建新用户并增加管理员权限(授权有问题)
转自:Ubuntu创建新用户并增加管理员权限 $是普通管员,#是系统管理员,在Ubuntu下,root用户默认是没有密码的,因此也就无法使用(据说是为了安全).想用root的话,得给root用户设置一 ...
- selenium的运行时异常
selenium这个库是一个伟大的库,它赋予了程序员控制浏览器的能力.但是如果不理解这个库的设计上的一些哲学,就会遇到很多问题. selenium支持多种浏览器,但是这些浏览器里面,只有firefox ...
- 怎样看待IT界业务，技术，管理的各自比重
怎样看待IT界业务,技术,管理的各自比重 技术是根本,业务是个人能力的体现,管理一般随意,追求简单,眼光向IBM等有优秀管理经验的大公司看齐 重点从个人的喜好.性格方面来考虑分配比重,可以加上 ...
- 安卓listView实现下拉刷新上拉加载滑动仿QQ的删除功能
大家对这些功能都是看的多了,然后对上拉刷新和下拉加载的原理都是非常清楚的,所以实现这功能其实也就是为了让大家能够从众多的同行们来进行比较学习而已,虽然即使是这样,但是面试的时候面试官还是会问你上拉和下 ...
- IIS7虚拟目录出现HTTP错误500.19（由于权限不足而无法读取配置文件）的解决方案
今天在window7上配置asp.net网站,但是访问总是提示 错误摘要HTTP 错误 500.19 - Internal Server Error无法访问请求的页面,因为该页的相关配置数据无效.详细 ...
- log4j（四）——如何控制不同风格的日志信息的输出？
一:测试环境与log4j(一)——为什么要使用log4j?一样,这里不再重述 二:老规矩,先来个栗子,然后再聊聊感受 import org.apache.log4j.*; //by godtrue p ...
- 12C的审计模式
1.Mixed Auditing Policy 混合审计模式支持新的审计引擎和老的审计引擎一起工作数据库升级后,已有的审计设置不会受到影响.但是官方建议迁移到统一审计模式.数据库创建后,默认是使用混合 ...
- MPU6050陀螺仪和加速度计的校准
加速度计和陀螺仪的校准: 在传感器静止不动水平放置时,测出陀螺仪和加速度计各轴的偏移值,保存.以后每次上电调用dmp_set_xx_bias()就行了. u8 run_self_test(void) ...
- linux下配置tomcat集群的负载均衡
linux下配置tomcat集群的负载均衡 一.首先了解下与集群相关的几个概念集群:集群是一组协同工作的服务实体,用以提供比单一服务实体更具扩展性与可用性的服务平台.在客户端看来,一个集群就象是一个服 ...
- 百度地图 隐藏百度地图Logo
/* 隐藏百度Logo */ .BMap_cpyCtrl, .anchorBL {display: none; }