详解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 相关文章推荐
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
Nov 06 Javascript
jQuery对表单的操作代码集合
Apr 06 Javascript
jQuery动态添加的元素绑定事件处理函数代码
Aug 02 Javascript
js如何调用qq互联api实现第三方登录
Mar 28 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
Dec 04 Javascript
jQuery移动端图片上传组件
Jun 12 Javascript
JavaScript比较同一天的时间大小实例代码
Feb 09 Javascript
JS中‘hello’与new String(‘hello’)引出的问题详解
Aug 14 Javascript
Vue函数式组件-你值得拥有
May 09 Javascript
Jquery高级应用Deferred对象原理及使用实例
May 28 jQuery
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
Oct 21 Javascript
vue绑定class的三种方法
Dec 24 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
注意:php5.4删除了session_unregister函数
2013/08/05 PHP
PHP面向对象程序设计实例分析
2016/01/26 PHP
php遍历目录下文件并按修改时间排序操作示例
2019/07/12 PHP
js 多浏览器分别判断代码
2010/04/01 Javascript
js点击更换背景颜色或图片的实例代码
2013/06/25 Javascript
JS截取字符串实例详解
2015/11/24 Javascript
Mvc提交表单的四种方法全程详解
2016/08/10 Javascript
vue.js移动端tab组件的封装实践实例
2017/06/30 Javascript
JavaScript中的return布尔值的用法和原理解析
2017/08/14 Javascript
利用three.js画一个3D立体的正方体示例代码
2017/11/19 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
2018/01/21 Javascript
js实现搜索栏效果
2018/11/16 Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
2019/01/06 Javascript
微信小程序访问豆瓣电影api的实现方法
2019/03/31 Javascript
Javascript操作select控件代码实例
2020/02/14 Javascript
js实现翻牌小游戏
2020/07/31 Javascript
解决vue打包报错Unexpected token: punc的问题
2020/10/24 Javascript
使用node-media-server搭建一个简易的流媒体服务器
2021/01/20 Javascript
[03:48]DOTA2完美大师赛主赛事第二日精彩集锦
2017/11/24 DOTA
跟老齐学Python之Python文档
2014/10/10 Python
Mac 上切换Python多版本
2017/06/17 Python
python3学习笔记之多进程分布式小例子
2018/02/13 Python
使用Numpy读取CSV文件,并进行行列删除的操作方法
2018/07/04 Python
python中dict字典的查询键值对 遍历 排序 创建 访问 更新 删除基础操作方法
2018/09/13 Python
python 自定义异常和异常捕捉的方法
2018/10/18 Python
python之PyQt按钮右键菜单功能的实现代码
2019/08/17 Python
Linux下升级安装python3.8并配置pip及yum的教程
2020/01/02 Python
基于spring boot 日志(logback)报错的解决方式
2020/02/20 Python
解决tensorflow读取本地MNITS_data失败的原因
2020/06/22 Python
使用Canvas操作像素的方法
2018/06/14 HTML / CSS
美国专营婴幼儿用品的购物网站:buybuy BABY
2017/01/01 全球购物
程序员经常用到的UNIX命令
2015/04/13 面试题
银行竞聘演讲稿
2014/05/16 职场文书
城市轨道交通工程职业生涯规划书范文
2014/09/16 职场文书
采购部年度工作总结
2015/08/13 职场文书
python必学知识之文件操作(建议收藏)
2021/05/30 Python