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事件冒泡机制和阻止冒泡 阻止默认行为好像永远也整不清楚,记了忘 忘了记...醉了 这篇文章写完以后下次再忘记 就呼自己一巴掌,忘一次一巴掌 首先要明白两个概念——事件和事件流 事件指的是用户或 ...
随机推荐
- Git坑换行符自动转换 [转载]
转自https://www.cnblogs.com/zjoch/p/5400251.html 源起 一直想在 GitHub 上发布项目.参与项目,但 Git 这货比较难学啊.买了一本<Git 权 ...
- MySql定期存档数据
# 创建归档表(只复制表结构和索引) CREATE TABLE Orders_2016 like Orders; # 删除归档表的所有索引(这样可以提高插入速度) # 以前的数据导入归档表 INSER ...
- Docker技术底层架构剖析
[Docker 底层技术] docker底层的 2 个核心技术分别是 Namespaces 和 Control groups 在操作系统中,网络配置,进程,用户,IPC(进程之间的调用)等信息之间的 ...
- Python学习(十六)—— 数据库
一.数据库介绍 数据库(Database,DB)是按照数据结构来组织.存储和管理数据的,并且是建立在计算机存储设备上的仓库. 数据库指的是以一定方式存储在一起.能为多个用户共享.具有尽可能小的冗余度. ...
- Codeforces 873E Awards For Contestants ST表
原文链接https://www.cnblogs.com/zhouzhendong/p/9255885.html 题目传送门 - CF873E 题意 现在要给 $n(n\leq 3000)$ 个学生颁奖 ...
- RocketMQ事务消息回查设计方案
用户U1从A银行系统转账给B银行系统的用户U2的处理过程如下:第一步:A银行系统生成一条转账消息,以事务消息的方式写入RocketMQ,此时B银行系统不可见这条消息(Prepare阶段) 第二步:写入 ...
- Hudson与Jenkins
Hudson是Jenkins的前身,它们都是基于Java开发的一种持续集成工具,用于监控程序重复的工作,包括: 1.持续的软件版本发布/测试项目. 2.监控外部调用执行的工作. Hudson的特性 1 ...
- Rendering React components to the document body
React一个比较好用的功能是其简单的API,一个组件可以简单到一个return了组件结构的render函数.除了一个简单的函数之外,我们还有了一段有用且可复用的代码片段. 问题 不过有时候可能会受到 ...
- Airtest基本使用
前段时间在博客中见到airtest的介绍,自己并实践了一番,用起来的确很方便,所以今天就来分享下. Airtest简介 Airtest是网易出品的一款基于图像识别和poco控件识别的一款UI自动化测试 ...
- window下的计划任务
0x00前言: 这几天看了看信息安全就业的面试题,其中有一条是计划任务如何设置,好几个月前稍微接触了,但是很久没用差不多都忘了>_<,这里就稍微学习下windows的计划任务 写着写着就偏 ...