详解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的关于动态创建DOM元素的问题
Dec 24 Javascript
五个jQuery图片画廊插件 推荐
May 12 Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
Feb 02 Javascript
HTML复选框和单选框 checkbox和radio事件介绍
Dec 12 Javascript
js判断设备是否为PC并调整图片大小
Feb 12 Javascript
jquery制作多功能轮播图插件
Apr 02 Javascript
jquery实现表单验证简单实例演示
Nov 23 Javascript
AngularJS入门教程之表格实例详解
Jul 27 Javascript
AngularJS入门教程之XHR和依赖注入详解
Aug 18 Javascript
Ionic + Angular.js实现图片轮播的方法示例
May 21 Javascript
bootstrap datepicker插件默认英文修改为中文
Jul 28 Javascript
javascript实现文字无缝滚动效果
Aug 26 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
MySQL数据库转移,access,sql server 转 MySQL 的图文教程
2007/09/02 PHP
基于在生产环境中使用php性能测试工具xhprof的详解
2013/06/03 PHP
php检测文本的编码
2015/07/26 PHP
验证token、回复图文\文本、推送消息的实用微信类php代码
2016/06/28 PHP
PHP扩展Swoole实现实时异步任务队列示例
2019/04/13 PHP
js遍历td tr等html元素
2012/12/13 Javascript
cookie.js 加载顺序问题怎么才有效
2013/07/31 Javascript
通过js获取div的background-image属性
2013/10/15 Javascript
浅析javascript中的事件代理
2015/11/06 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
2016/01/28 Javascript
jQuery实现摸拟alert提示框
2016/05/22 Javascript
JavaScript原生节点操作小结
2017/01/17 Javascript
jquery实现tab键进行选择后enter键触发click行为
2017/03/29 jQuery
Javascript三种字符串连接方式及性能比较
2019/05/28 Javascript
vue.js+ElementUI实现进度条提示密码强度效果
2020/01/18 Javascript
python实现数据图表
2017/07/29 Python
详解appium+python 启动一个app步骤
2017/12/20 Python
Python实现PS滤镜特效之扇形变换效果示例
2018/01/26 Python
Python中多个数组行合并及列合并的方法总结
2018/04/12 Python
Numpy array数据的增、删、改、查实例
2018/06/04 Python
python操作redis方法总结
2018/06/06 Python
Python实现模拟登录网易邮箱的方法示例
2018/07/05 Python
python多进程控制学习小结
2018/10/31 Python
详解python读取image
2019/04/03 Python
详解python statistics模块及函数用法
2019/10/27 Python
Python有参函数使用代码实例
2020/01/06 Python
基于keras 模型、结构、权重保存的实现
2020/01/24 Python
基于python纯函数实现井字棋游戏
2020/05/27 Python
解决pip安装的第三方包在PyCharm无法导入的问题
2020/10/15 Python
电影T恤、80年代T恤和80年代服装:TV Store Online
2020/01/05 全球购物
晚归检讨书
2014/02/19 职场文书
大学生个人自荐信
2014/02/24 职场文书
优秀教师个人材料
2014/12/15 职场文书
2016年党员干部公开承诺书
2016/03/24 职场文书
导游词之桂林山水
2019/09/20 职场文书
解决使用了nginx获取IP地址都是127.0.0.1 的问题
2021/09/25 Servers