事件对象:

  1. <input type="button" name="" value="按钮" @click="show($event)">
  2. methods: {
  3. show: function(ev) {
  4. alert(ev.clientX);
  5. alert(ev.clientY);
  6. }
  7. }

事件冒泡:

  1. <div @click="show2()">
  2. <input type="button" name="" value="按钮" @click.stop="show()">
  3. </div>
  4. methods: {
  5. show: function() {
  6. alert(111);
  7. //原生的写法
  8. //ev.cancelBubble = true;
  9. },
  10. show2: function() {
  11. alert(222);
  12. }
  13. }

阻止事件默认行为:

  1. <input type="button" name="" value="按钮" @contextmenu.prevent="show()">
  2. methods: {
  3. show: function() {
  4. alert(111)
  5. },
  6. show2: function() {
  7. alert(222)
  8. }
  9. }

vue事件对象、冒泡、阻止默认行为的更多相关文章

  1. Vue 事件修饰符 阻止默认事件

    阻止默认事件: <a v-on:click.prevent="doThat"></a>

  2. vue 事件上加阻止冒泡 阻止默认事件

    重点 vue事件修饰符 <!-- 阻止单击事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提 ...

  3. 前端(十五)—— JavaScript事件:绑定事件方式、事件的冒泡和默认事件、鼠标事件、键盘事件、表单 事件、文档事件、图片事件、页面事件

    JS事件:绑定事件方式.事件的冒泡和默认事件.鼠标事件.键盘事件.表单 事件.文档事件.图片事件.页面事件 一.事件的两种绑定方式 1.on事件绑定方式 document.onclick = func ...

  4. 从零开始的全栈工程师——js篇2.21(事件对象 arguments 阻止事件默认行为兼容 事件委托 事件源对象)

    一.事件对象 1.常用的事件2.每个元素身上的事件都是天生存在的 不需要我们去定义 只需要我们给这个事件绑定一个方法 当事件触发的时候就会执行这个方法 3.事件绑定的写法 ①div.onclick=f ...

  5. 事件处理 及冒泡 阻止默认事件 以及tab 切换的思路

    1.axios post通过点击事件提交数据不需要使用input直接使用state2.pdd你好天天象上默认执行点击(1,2,3)也可以执行并且能切换页码3.tab 针对新闻不同时4.天天象上首页和精 ...

  6. 微信小程序入门学习之事件 事件对象 冒泡非冒泡事件(1)

    这关于事件的学习,可以自己复制到微信开发者工具上自己运行试试. 首先这里有两个文件.js 和.wxml 文件 首先给出.js文件下代码 // pages/news/news.js Page({ /** ...

  7. 从零开始的全栈工程师——js篇2.20(事件对象 冒泡与捕获)

    一.复习 面向对象 1)单例模式 2)工厂模式 3)构造函数 ①类js天生自带的类 基类object function array number math boolean date regexp st ...

  8. vue.js 自带阻止默认事件 阻止冒泡

    <!-- 阻止单击事件冒泡 --> <a v-on:click.stop="doThis"></a>   <!-- 提交事件不再重载页面  ...

  9. 这可能是最简明扼要的 js事件冒泡机制+阻止默认事件 讲解了

    哎 js事件冒泡机制和阻止冒泡 阻止默认行为好像永远也整不清楚,记了忘 忘了记...醉了 这篇文章写完以后下次再忘记 就呼自己一巴掌,忘一次一巴掌 首先要明白两个概念——事件和事件流 事件指的是用户或 ...

随机推荐

  1. Centos6中Docker使用中国官方镜像加速

    vi /etc/sysconfig/docker 增加如下内容: other_args="--registry-mirror=https://registry.docker-cn.com&q ...

  2. 【BZOJ】3022: [Balkan2012]The Best Teams

    原题链接 题面 (为啥这题没有题面-- 给出\(N\)个人,和年龄\(age_{i},skill_{i}\) 然后给出\(M\)个询问,就是年龄在\(a\)以下选不超过\(k\)个人 要求选择的人水平 ...

  3. centos中less翻页查询的用法

    用法实例: cat 21342.log | less

  4. plt实现动态画图

    用pycharm跑的没有出现动态线条的话: 1.点击setting,输入关键字Scien...搜索出Python Scientific, 在右侧去掉对勾(默认是勾选的),然后右下角Apply--OK, ...

  5. HTML5拖放牛刀小试

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. Codeforces 1016G Appropriate Team 数论 FWT

    原文链接https://www.cnblogs.com/zhouzhendong/p/CF1016G.html 题目传送门 - CF1016G 题意 给定 $n,x,y$ ,以及一个含有 $n$ 个元 ...

  7. 51nod1967 路径定向 Fleury

    题目传送门 题解 几乎是Fleury模板题. 一开始我们把图看作无向图,然后对于度为奇数的点增边,使得整个图的所有点都是偶数的. 然后跑一遍欧拉回路 Fleury ,所有的边就定向好了~ 代码 #in ...

  8. Python交互图表可视化Bokeh:7. 工具栏

    ToolBar工具栏设置 ① 位置设置② 移动.放大缩小.存储.刷新③ 选择④ 提示框.十字线 1. 位置设置 import numpy as np import pandas as pd impor ...

  9. day15 函数的使用方法:递归函数

    这里归纳的知识点主要就是: 浮点数,复数, int,整形:float,浮点数:complx,复数: # 实数: # 有理数 有限小数 1.2 # 无限循环小数 1.23232323232323.... ...

  10. 利用log4添加log

    應用log4net.dll 新建Global.asax,在cs文件中添加 protected void Application_Start(object sender, EventArgs e)    ...