详解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 相关文章推荐
破除网页鼠标右键被禁用的绝招大全
Dec 27 Javascript
asp批量修改记录的代码
Jun 25 Javascript
cookie.js 加载顺序问题怎么才有效
Jul 31 Javascript
jQuery 三击事件实现代码
Sep 11 Javascript
jquery中animate动画积累的解决方法
Oct 05 Javascript
JavaScript保留关键字汇总
Dec 01 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
Nov 29 Javascript
jQuery Validation Engine验证控件调用外部函数验证的方法
Jan 18 Javascript
js 获取json数组里面数组的长度实例
Oct 31 Javascript
react 应用多入口配置及实践总结
Oct 17 Javascript
在vue中高德地图引入和轨迹的绘制的实现
Oct 11 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
Dec 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中通过ADODB库实现调用Access数据库之修正版本
2006/12/31 PHP
PHP 5.3.0 安装分析心得
2009/08/07 PHP
PHP set_error_handler()函数使用详解(示例)
2013/11/12 PHP
PHP实现的博客欢迎提示功能(很特别哦)
2014/06/05 PHP
如何让thinkphp在模型中自动完成session赋值小教程
2014/09/05 PHP
PHP实现的简单日历类
2014/11/29 PHP
PHP实现根据银行卡号判断银行
2015/04/29 PHP
php实现将Session写入数据库
2015/07/26 PHP
php生成静态html页面的方法(2种方法)
2015/09/14 PHP
详解php魔术方法(Magic methods)的使用方法
2016/02/14 PHP
详谈PHP中的密码安全性Password Hashing
2017/02/04 PHP
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
2010/03/05 Javascript
基于jquery的模态div层弹出效果
2010/08/21 Javascript
js将iframe中控件的值传到主页面控件中的实现方法
2013/03/11 Javascript
jquery实现按Enter键触发事件示例
2013/09/10 Javascript
js动态往表格的td中添加图片并注册事件
2014/06/12 Javascript
js实现n秒倒计时后才可以点击的效果
2015/12/20 Javascript
ztree简介_动力节点Java学院整理
2017/07/19 Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
2018/02/05 Javascript
JS 实现获取验证码 倒计时功能
2018/10/29 Javascript
vue全局自定义指令-元素拖拽的实现代码
2019/04/14 Javascript
[02:51]2014DOTA2国际邀请赛 IG战队官方纪录片
2014/07/21 DOTA
TensorFlow 合并/连接数组的方法
2018/07/27 Python
pygame实现非图片按钮效果
2019/10/29 Python
Python使用py2neo操作图数据库neo4j的方法详解
2020/01/13 Python
Python修改列表值问题解决方案
2020/03/06 Python
Python在终端通过pip安装好包以后在Pycharm中依然无法使用的问题(三种解决方案)
2020/03/10 Python
全球性的众包图形设计市场:DesignCrowd
2021/02/02 全球购物
Order by的几种用法
2013/06/16 面试题
大学毕业生简单自荐信
2013/11/05 职场文书
电子信息专业应届生自荐信
2014/06/04 职场文书
渠道运营商合作协议书范本
2014/10/06 职场文书
教师个人年终总结
2015/02/11 职场文书
德能勤绩廉个人总结
2015/02/14 职场文书
惹女朋友生气检讨书
2015/05/06 职场文书
MySQL存储过程及语法详解
2022/08/05 MySQL