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 相关文章推荐
JavaScript 拾漏补遗
Dec 27 Javascript
javascript数据结构之二叉搜索树实现方法
Nov 25 Javascript
javascript闭包(Closure)用法实例简析
Nov 30 Javascript
点评js异步加载的4种方式
Dec 22 Javascript
基于jQuery Tipso插件实现消息提示框特效
Mar 16 Javascript
无缝滚动的简单实现代码(推荐)
Jun 07 Javascript
JS根据生日月份和日期计算星座的简单实现方法
Nov 24 Javascript
AngularJS路由实现页面跳转实例
Mar 03 Javascript
Vue动态控制input的disabled属性的方法
Jun 26 Javascript
JavaScript使用indexOf()实现数组去重的方法分析
Sep 04 Javascript
Layui弹出层 加载 做编辑页面的方法
Sep 16 Javascript
使用react-virtualized实现图片动态高度长列表的问题
May 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
法国:浪漫之都的咖啡文化
2021/03/03 咖啡文化
PHP调用MySQL存储过程并返回值的方法
2014/12/26 PHP
Laravel 5框架学习之Blade 简介
2015/04/08 PHP
Laravel 5框架学习之Eloquent (laravel 的ORM)
2015/04/08 PHP
PHP滚动日志的代码实现
2015/06/10 PHP
php中注册器模式类用法实例分析
2015/11/03 PHP
php查找字符串中第一个非0的位置截取
2017/02/27 PHP
PHP如何通过date() 函数格式化显示时间
2020/11/13 PHP
摘自百度的图片轮换效果代码
2007/11/19 Javascript
Javascript与flash交互通信基础教程
2008/08/07 Javascript
JS 表单验证大全
2011/11/23 Javascript
javascript针对DOM的应用实例(一)
2012/04/15 Javascript
jquery form 隐藏的input 选择
2014/04/29 Javascript
JS代码实现根据时间变换页面背景效果
2016/06/16 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
2016/07/06 Javascript
jquery-mobile表单的创建方法详解
2016/11/23 Javascript
vue实现页面加载动画效果
2017/09/19 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
2020/10/22 Javascript
原生JS运动实现轮播图
2021/01/02 Javascript
python递归计算N!的方法
2015/05/05 Python
学习python之编写简单简单连接数据库并执行查询操作
2016/02/27 Python
你所不知道的Python奇技淫巧13招【实用】
2016/12/14 Python
python实现下载整个ftp目录的方法
2017/01/17 Python
Python cv2 图像自适应灰度直方图均衡化处理方法
2018/12/07 Python
python3利用ctypes传入一个字符串类型的列表方法
2019/02/12 Python
处理python中多线程与多进程中的数据共享问题
2019/07/28 Python
创意爱尔兰礼物:Creative Irish Gifts
2020/01/29 全球购物
汽车维修专业毕业生的求职信分享
2013/12/04 职场文书
医药代表个人求职信范本
2013/12/19 职场文书
理工类毕业自我鉴定
2014/02/20 职场文书
贪污检举信范文
2015/03/02 职场文书
2015年销售内勤工作总结
2015/04/27 职场文书
西游记读书笔记
2015/06/25 职场文书
golang操作redis的客户端包有多个比如redigo、go-redis
2022/04/14 Golang
Python matplotlib 利用随机函数生成变化图形
2022/04/26 Python
webpack介绍使用配置教程详解webpack介绍和使用
2022/06/25 Javascript