事件对象:

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

事件冒泡:

            <div @click="show2()">
<input type="button" name="" value="按钮" @click.stop="show()">
</div>
methods: {
show: function() {
alert(111);
//原生的写法
//ev.cancelBubble = true;
},
show2: function() {
alert(222);
}
}

阻止事件默认行为:

            <input type="button" name="" value="按钮" @contextmenu.prevent="show()">
methods: {
show: function() {
alert(111)
},
show2: function() {
alert(222)
}
}

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. es6 新增字符串方法

    es6新增了4个字符串处理的方法:startsWith,endsWith,includes,repeat. 1.简单使用 includes()返回布尔值,表示是否找到了参数字符串 startsWith ...

  2. php让一个数组按照另外一个数组的键名进行排序

    $a = [ 'id', 'name', 'identityId', 'phone', 'email', 'schoolId' ]; $b = [ 'id' => '唯一标识', 'identi ...

  3. [转]oracle分页用两层循环还是三层循环?

    select t2.* from --两层嵌套 (select t.* , rownum as row_numfrom t where rownum <=20) t2 where t2.row_ ...

  4. Nginx配置多个基于域名的虚拟主机+实验环境搭建+测试

    标签:Linux 域名 Nginx 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://xpleaf.blog.51cto.com/9 ...

  5. 前端本地存储localStorage

    1.突破cookie 4K限制,一般浏览器支持5M 2.增 删 改 查 <!DOCTYPE html> <html lang="en"> <head& ...

  6. Python_socket

    TCP : 可靠传输,不安全,UDP: 安全传输,不可靠 一台机器上有2^16-1=65535个端口(1-1024)保留自己开就1024往上 socket (套接字):也可以理解为它是一个管道,用于描 ...

  7. 实际生产用法CMS和G1

    java -Xms100m -Xmx100m -Xmn50m -XX:MetaspaceSize=20m -XX:MaxMetaspaceSize=20m -XX:+UseConcMarkSweepG ...

  8. vnc启动失败

    SSH登陆服务器,用命令行重启VNC服务 $service vncserver start 提示如下错误: Starting VNC server: no displays configured    ...

  9. P1373 小a和uim之大逃离 二维dp

    题目背景 小a和uim来到雨林中探险.突然一阵北风吹来,一片乌云从北部天边急涌过来,还伴着一道道闪电,一阵阵雷声.刹那间,狂风大作,乌云布满了天空,紧接着豆大的雨点从天空中打落下来,只见前方出现了一个 ...

  10. ASP.NET 页面执行顺序

    1.对象初始化(Onlnit方法) 页面中的控件(包括页面本身)都是在它们最初的form中被首次初始化的,通过在aspx页面的后台代码文件的构造器中声明你的对象,页面将知道对象的类型,并知道需要创建多 ...