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


Posted in Javascript onJuly 24, 2017

整理文档,搜刮出一个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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 表单验证扩展代码(一)
Oct 11 Javascript
JavaScript多并发问题如何处理
Oct 28 Javascript
jQuery 弹出层插件(推荐)
May 24 Javascript
微信小程序 教程之WXML
Oct 18 Javascript
jQuery下拉菜单的实现代码
Nov 03 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
Jan 19 Javascript
微信小程序 本地数据存储实例详解
Apr 13 Javascript
AngularJS使用ocLazyLoad实现js延迟加载
Jul 05 Javascript
JS实现按钮颜色切换效果
Sep 05 Javascript
Vue父子模版传值及组件传值的三种方法
Nov 27 Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
Aug 24 Javascript
javascript实现商品图片放大镜
Nov 28 Javascript
关于vue-resource报错450的解决方案
Jul 24 #Javascript
JavaScript中的FileReader图片预览上传功能实现代码
Jul 24 #Javascript
react-router4 嵌套路由的使用方法
Jul 24 #Javascript
关于react-router的几种配置方式详解
Jul 24 #Javascript
简单实现js放大镜效果
Jul 24 #Javascript
Vue列表页渲染优化详解
Jul 24 #Javascript
javascript cookie的基本操作(添加和删除)
Jul 24 #Javascript
You might like
DC宇宙的第一个英雄,堪称动漫史鼻祖,如今成为美国文化的象征
2020/04/09 欧美动漫
经典的星际争霸,满是回忆的BGM
2020/04/09 星际争霸
PHP中的超全局变量
2006/10/09 PHP
DedeCMS 核心类TypeLink.class.php摘要笔记
2010/04/07 PHP
php的mssql数据库连接类实例
2014/11/28 PHP
phpstorm最新激活码分享亲测phpstorm2020.2.3版可用
2020/11/22 PHP
很棒的学习jQuery的12个网站推荐
2011/04/28 Javascript
js控制表单操作的常用代码小结
2013/08/15 Javascript
JavaScript代码编写中各种各样的坑和填坑方法
2014/06/06 Javascript
javascript写的异步加载js文件函数(支持数组传参)
2014/06/07 Javascript
JavaScript实现给定时间相加天数的方法
2016/01/25 Javascript
详解nodejs模板引擎制作
2017/06/14 NodeJs
详解ES6之用let声明变量以及let loop机制
2017/07/15 Javascript
vue element table 表格请求后台排序的方法
2018/09/28 Javascript
vue工程全局设置ajax的等待动效的方法
2019/02/22 Javascript
node-red File读取好保存实例讲解
2019/09/11 Javascript
JavaScript数组排序小程序实现解析
2020/01/13 Javascript
vue在线动态切换主题色方案
2020/03/26 Javascript
Nest.js环境变量配置与序列化详解
2021/02/21 Javascript
跟老齐学Python之Import 模块
2014/10/13 Python
Python实现的多进程拷贝文件并显示百分比功能示例
2019/04/09 Python
pytorch 可视化feature map的示例代码
2019/08/20 Python
Pyorch之numpy与torch之间相互转换方式
2019/12/31 Python
GDAL 矢量属性数据修改方式(python)
2020/03/10 Python
Python爬虫设置ip代理过程解析
2020/07/20 Python
Joie官方网上商店:购买服装和女装配饰
2018/06/05 全球购物
几道数据库的概念性面试题
2014/05/30 面试题
经济信息管理专业大学生求职信
2013/09/27 职场文书
老师给学生的表扬信
2014/01/17 职场文书
《画风》教学反思
2014/04/16 职场文书
租房协议书范文
2014/08/20 职场文书
农村文化活动总结
2014/08/28 职场文书
2014年个人教学工作总结
2014/12/09 职场文书
高校教师个人工作总结2014
2014/12/17 职场文书
业务员岗位职责
2015/02/03 职场文书
植树节新闻稿
2015/07/17 职场文书