vue事件对象、冒泡、阻止默认行为
事件对象:
<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事件对象、冒泡、阻止默认行为的更多相关文章
- Vue 事件修饰符 阻止默认事件
阻止默认事件: <a v-on:click.prevent="doThat"></a>
- vue 事件上加阻止冒泡 阻止默认事件
重点 vue事件修饰符 <!-- 阻止单击事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提 ...
- 前端(十五)—— JavaScript事件:绑定事件方式、事件的冒泡和默认事件、鼠标事件、键盘事件、表单 事件、文档事件、图片事件、页面事件
JS事件:绑定事件方式.事件的冒泡和默认事件.鼠标事件.键盘事件.表单 事件.文档事件.图片事件.页面事件 一.事件的两种绑定方式 1.on事件绑定方式 document.onclick = func ...
- 从零开始的全栈工程师——js篇2.21(事件对象 arguments 阻止事件默认行为兼容 事件委托 事件源对象)
一.事件对象 1.常用的事件2.每个元素身上的事件都是天生存在的 不需要我们去定义 只需要我们给这个事件绑定一个方法 当事件触发的时候就会执行这个方法 3.事件绑定的写法 ①div.onclick=f ...
- 事件处理 及冒泡 阻止默认事件 以及tab 切换的思路
1.axios post通过点击事件提交数据不需要使用input直接使用state2.pdd你好天天象上默认执行点击(1,2,3)也可以执行并且能切换页码3.tab 针对新闻不同时4.天天象上首页和精 ...
- 微信小程序入门学习之事件 事件对象 冒泡非冒泡事件(1)
这关于事件的学习,可以自己复制到微信开发者工具上自己运行试试. 首先这里有两个文件.js 和.wxml 文件 首先给出.js文件下代码 // pages/news/news.js Page({ /** ...
- 从零开始的全栈工程师——js篇2.20(事件对象 冒泡与捕获)
一.复习 面向对象 1)单例模式 2)工厂模式 3)构造函数 ①类js天生自带的类 基类object function array number math boolean date regexp st ...
- vue.js 自带阻止默认事件 阻止冒泡
<!-- 阻止单击事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 ...
- 这可能是最简明扼要的 js事件冒泡机制+阻止默认事件 讲解了
哎 js事件冒泡机制和阻止冒泡 阻止默认行为好像永远也整不清楚,记了忘 忘了记...醉了 这篇文章写完以后下次再忘记 就呼自己一巴掌,忘一次一巴掌 首先要明白两个概念——事件和事件流 事件指的是用户或 ...
随机推荐
- OpenGL的gl.h出现一堆错误,如重定义什么的
问题:生成时提示 gl.h中出现一堆错误,如 error C2144: 语法错误 : "void"的前面应有";" error C2182: "API ...
- zjoi[ZJOI2018]胖
题解: 因为n,m很大 所以复杂度应该是和m相关的 考虑到每个点的影响区间是连续的 就很简单了 区间查询最小值线段树维护(st表也可以) 然后注意一下不要重复算一个就可以了 max函数用templat ...
- python基础——函数
1.内置函数的调用: 可以在官方网站查找内置函数及说明,也可以通过help(abs)函数查看相应的信息. https://docs.python.org/3/library/functions.htm ...
- 实际生产用法CMS和G1
java -Xms100m -Xmx100m -Xmn50m -XX:MetaspaceSize=20m -XX:MaxMetaspaceSize=20m -XX:+UseConcMarkSweepG ...
- 049 DSL语句
1.说明 2.sql程序 package com.scala.it import org.apache.spark.sql.hive.HiveContext import org.apache.spa ...
- mac docker环境搭建mysql主从同步服务器
参考地址:https://www.cnblogs.com/jinjiangongzuoshi/p/9299275.html 1.下载镜像 docker pull mysql:5.7.19 2.建立配用 ...
- window.location.replace和window.location.href区别
有3个页面 a,b,c 如果当前页面是c页面,并且c页面是这样跳转过来的:a->b->c 1:b->c 是通过window.location.replace("..xx/c ...
- 使用Chrome浏览器设置XX-net的方法
以下介绍使用Chrome浏览器设置XX-net的方法 1.下载并安装谷歌浏览器. 2.打开https://github.com/XX-net/XX-Net/blob/master/code/d ...
- hdu 2181 哈密顿绕行世界问题【DFS】
题目链接 题目大意: Problem Description 一个规则的实心十二面体,它的 20个顶点标出世界著名的20个城市,你从一个城市出发经过每个城市刚好一次后回到出发的城市. Input ...
- poj3311
poj3311我写的第一篇状压dp,调试了好久23333,其实状压就是二进制结合位运算,把整体的状态用二进制来表示,一般是0/1,用没用过或者走没走没走过的问题,其实这种思想在搜索中也有涉及过,与dp ...