详解vue事件对象、冒泡、阻止默认行为


Posted in Javascript onMarch 20, 2017

整理文档,搜刮出一个vue事件对象、冒泡、阻止默认行为的代码,稍微整理精简一下做下分享。

事件对象

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <script src="../js/Vue.js" charset="utf-8"></script>
  <script type="text/javascript">
   window.onload = function(){
    var vm = new Vue({
     el:'#box',
     data:{},
     methods:{
      show:function(ev){
       alert(ev.clientX);
       alert(ev.clientY);
      }
     }
    });
   }
  </script>
 </head>
 <body>
  <div id="box">
   <input type="button" name="" value="按钮" @click="show($event)">
  </div>
 </body>
</html>

事件冒泡

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <script src="../js/Vue.js" charset="utf-8"></script>
  <script type="text/javascript">
   window.onload = function(){
    var vm = new Vue({
     el:'#box',
     data:{},
     methods:{
      show:function(){
       alert(111);
      //原生的写法
      //ev.cancelBubble = true;
      },
      show2:function(){
       alert(222);
      }
     }
    });
   }
  </script>
 </head>
 <body>
  <div id="box">
   <div @click="show2()">
    <input type="button" name="" value="按钮" @click.stop="show()">
   </div>
  </div>
 </body>
</html>

阻止事件默认行为

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style>
    .show2{
      padding:15px;;
    }
  </style>
  <script src="../js/Vue.js" charset="utf-8"></script>
  <script type="text/javascript">
    window.onload = function () {
      var vm = new Vue({
        el: '#box',
        data: {},
        methods: {
          show: function () {
            alert(111)
          },
          show2: function () {
            alert(222)
          }
        }
      });
    }
  </script>
</head>
<body>
<div id="box">
  <div class="show2">
    <input type="button" name="" value="按钮" @contextmenu.prevent="show()">
  </div>
</div>
</body>
</html>

希望本文所述对你有所帮助,vue事件对象、冒泡、阻止默认行为内容就给大家介绍到这里了。希望大家继续关注我们的网站!想要学习vue可以继续关注本站。

Javascript 相关文章推荐
jquery的冒泡事件的阻止与允许(三种实现方法)
Feb 01 Javascript
js实现页面转发功能示例代码
Aug 05 Javascript
原生js实现改变随意改变div属性style的名称和值的结果
Sep 26 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
Nov 29 Javascript
jQuery选择器基础入门教程
May 10 Javascript
原生JS上传大文件显示进度条 php上传文件代码
Mar 27 Javascript
JavaScript数据结构之双向链表定义与使用方法示例
Oct 27 Javascript
vue-router配合ElementUI实现导航的实例
Feb 11 Javascript
详解vue移动端项目代码拆分记录
Mar 15 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
Dec 08 Javascript
前端vue如何使用高德地图
Nov 05 Javascript
Javascript的promise,async和await的区别详解
Mar 24 Javascript
javascript使用btoa和atob来进行Base64转码和解码
Mar 20 #Javascript
vue.js事件处理器是什么
Mar 20 #Javascript
Vue.js事件处理器与表单控件绑定详解
Mar 20 #Javascript
Vue.js基础学习之class与样式绑定
Mar 20 #Javascript
详解Vue中添加过渡效果
Mar 20 #Javascript
JS模拟实现ECMAScript5新增的数组方法
Mar 20 #Javascript
JavaScript 过滤关键字
Mar 20 #Javascript
You might like
PHP 编写的 25个游戏脚本
2009/05/11 PHP
php array_unique之后json_encode需要注意
2011/01/02 PHP
php 字符串替换的方法
2012/01/10 PHP
php删除与复制文件夹及其文件夹下所有文件的实现代码
2013/01/23 PHP
PHP中header函数的用法及其注意事项详解
2016/06/13 PHP
jQuery代码实现发展历程时间轴特效
2015/07/30 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
2015/12/01 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
2016/09/20 Javascript
用iframe实现不刷新整个页面上传图片的实例
2016/11/18 Javascript
详解支持Angular 2的表格控件
2017/01/19 Javascript
Vue封装一个简单轻量的上传文件组件的示例
2018/03/21 Javascript
Vue自定义指令封装节流函数的方法示例
2018/07/09 Javascript
Vue点击切换颜色的方法
2018/09/13 Javascript
关于vue的npm run dev和npm run build的区别介绍
2019/01/14 Javascript
JS实现点击li标签弹出对应的索引功能【案例】
2019/02/18 Javascript
前端路由&amp;webpack基础配置详解
2019/06/10 Javascript
微信小程序button标签open-type属性原理解析
2020/01/21 Javascript
Vue-cli3多页面配置详解
2020/03/22 Javascript
[01:30:54]《加油DOTA》 第三期
2014/08/18 DOTA
[00:35]DOTA2上海特级锦标赛 EG战队宣传片
2016/03/04 DOTA
Python下载网络小说实例代码
2018/02/03 Python
对python list 遍历删除的正确方法详解
2018/06/29 Python
使用pandas把某一列的字符值转换为数字的实例
2019/01/29 Python
Python中三元表达式的几种写法介绍
2019/03/04 Python
python 根据字典的键值进行排序的方法
2019/07/24 Python
Python绘制股票移动均线的实例
2019/08/24 Python
Python urllib request模块发送请求实现过程解析
2020/12/10 Python
《山谷中的谜底》教学反思
2014/04/26 职场文书
会计求职信
2014/05/29 职场文书
市级三好学生事迹材料
2014/08/27 职场文书
爱心捐助活动总结
2015/05/09 职场文书
毕业论文致谢词
2015/05/14 职场文书
2015年高三班主任工作总结
2015/05/21 职场文书
学校运动会通讯稿
2015/07/18 职场文书
CSS3鼠标悬浮过渡缩放效果
2021/04/17 HTML / CSS
MySQL慢查询优化解决问题
2022/03/17 MySQL