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的右键菜单插件,但是都有各种问题.所以就自己动手把两种插件结合了下. 修改后的右键菜单插架可以根据绑定的触发页面元素不同,复用同一个菜单 ...
随机推荐
- 命令行参数解析函数getopt和getopt_long函数【转】
原文地址:http://blog.csdn.net/cashey1991/article/details/7942809 getopt和getopt_long函数 平时在写程序时常常需要对命令行参 ...
- 树莓派进阶之路 (010) - 树莓派raspi-config配置（转）
经过前面两步我们的树莓派已经正常的工作起来了,但是在真正用它开发之前还需要进行一些列的配置以及软件的安装,这样开发起来才会得心应手,下面我们介绍一下常用的软件和服务 1.配置选项: 树莓派第一次使用的 ...
- 【Oracle】详解ORACLE中的trigger(触发器)
本篇主要内容如下: 8.1 触发器类型 8.1.1 DML触发器 8.1.2 替代触发器 8.1.3 系统触发器 8.2 创建触发器 8.2.1 触发器触发次序 8.2.2 创建DML触发器 8.2. ...
- QQMacMgr for Mac（腾讯电脑管家）安装
1.软件简介 腾讯电脑管家是 macOS 系统上一款由腾讯公司带来到的安全管理软件.功能有垃圾清理.软件仓库.小火箭加速和防钓鱼等.而在视觉 UI 上,导入星空概念,操作过场动画全部以星空为题材 ...
- MySQL USING 和 HAVING 用法
USING 用于表连接时给定连接条件(可以理解为简写形式),如 SELECT * FROM table1 JOIN table2 ON table1.id = table2.id 使用 USING ...
- 【转】Lisp 已死，Lisp 万岁！
Lisp 已死,Lisp 万岁! 有一句古话,叫做“国王已死,国王万岁!”它的意思是,老国王已经死去,国王的儿子现在继位.这句话的幽默,就在于这两个“国王”其实指的不是同一个人,而你咋一看还以为它自相 ...
- tomcat服务器配置字符集为utf-8-彻底解决中文乱码问题
<Connector port="8070" protocol="HTTP/1.1" connectionTimeout="20000" ...
- PMD-Java 代码检查工具对 error 和 warning 的配置
PMD是一款优秀的Java程序代码检查工具.该它可以检查Java代码中是否含有未使用的变量.是否含有空的抓取块.是否含有不必要的对象等. 但在使用过程中,你会项目中发现存在大量的 PMD 插件报出的 ...
- 第2章 Python基础-字符编码&数据类型 购物车&多级菜单 作业
作业 一.三级菜单 数据结构: menu = { '北京':{ '海淀':{ '五道口':{ 'soho':{}, '网易':{}, 'google':{} }, '中关村':{ '爱奇艺':{}, ...
- window.location.href 与 window.loaction.replace区别
window.location.href和window.location.replace的区别 1.window.location.href=“url”:改变url地址: 2.window.locat ...