详解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 相关文章推荐
Wordpress ThickBox 点击图片显示下一张图的修改方法
Dec 11 Javascript
js获取html参数及向swf传递参数应用介绍
Feb 18 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
May 27 Javascript
js的延迟执行问题分析
Jun 23 Javascript
node.js中的fs.lchmod方法使用说明
Dec 16 Javascript
JavaScript实现简单的数字倒计时
May 15 Javascript
基于jQuery实现仿微博发布框字数提示
Jul 27 Javascript
loading动画特效小结
Jan 22 Javascript
Three.js基础学习教程
Nov 16 Javascript
微信小程序实现发送验证码按钮效果
Dec 20 Javascript
解决layui的input独占一行的问题
Sep 10 Javascript
vite2.0+vue3移动端项目实战详解
Mar 03 Vue.js
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
用Json实现PHP与JavaScript间数据交换的方法详解
2013/06/20 PHP
Nginx下配置codeigniter框架方法
2015/04/07 PHP
利用php获得flv视频长度的实例代码
2017/10/26 PHP
laravel model模型定义实现开启自动管理时间created_at,updated_at
2019/10/17 PHP
js获取select标签选中值的两种方式
2014/01/09 Javascript
jQuery制作简洁的图片轮播效果
2015/04/03 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
2015/12/30 Javascript
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
2018/05/26 Javascript
vue踩坑记-在项目中安装依赖模块npm install报错
2019/04/02 Javascript
JavaScript实现秒杀时钟倒计时
2019/09/29 Javascript
Vue实现base64编码图片间的切换功能
2019/12/04 Javascript
Node.js实现批量下载图片简单操作示例
2020/01/18 Javascript
Python通过poll实现异步IO的方法
2015/06/04 Python
Python的Flask框架中使用Flask-Migrate扩展迁移数据库的教程
2016/06/14 Python
Python yield 使用方法浅析
2017/05/20 Python
使用keras实现孪生网络中的权值共享教程
2020/06/11 Python
如何让PyQt5中QWebEngineView与JavaScript交互
2020/10/21 Python
css3圆角样式分享自定义按钮样式
2013/12/27 HTML / CSS
中国专业的综合网上购物商城:京东
2016/08/02 全球购物
在数据文件自动增长时,自动增长是否会阻塞对文件的更新
2014/05/01 面试题
什么叫应用程序域?什么是托管代码?什么是强类型系统?什么是装箱和拆箱?什么是重载?CTS、CLS和CLR分别作何解释?
2012/05/23 面试题
UDP协议功能
2013/01/06 面试题
优秀毕业生求职信范文
2014/01/02 职场文书
酒店管理专业毕业生求职自荐信
2014/04/28 职场文书
贷款委托书怎么写
2014/08/02 职场文书
小学生十佳少年事迹材料
2014/08/20 职场文书
三方协议书
2015/01/27 职场文书
教师考核表个人总结
2015/02/12 职场文书
2015年乡镇信访工作总结
2015/04/07 职场文书
信访维稳承诺书
2015/05/04 职场文书
经营场所使用证明
2015/06/19 职场文书
市直属机关2016年主题党日活动总结
2016/04/05 职场文书
如果用一句诗总结你的上半年,你会用哪句呢?
2019/07/16 职场文书
小学三年级作文之写景
2019/11/05 职场文书
python opencv通过按键采集图片源码
2021/05/20 Python
spring cloud 配置中心native配置方式
2021/09/25 Java/Android