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事件冒泡机制和阻止冒泡 阻止默认行为好像永远也整不清楚,记了忘 忘了记...醉了 这篇文章写完以后下次再忘记 就呼自己一巴掌,忘一次一巴掌 首先要明白两个概念——事件和事件流 事件指的是用户或 ...
随机推荐
- T4模版自动生成MSSQL实体类
在Model层建立ModelAuto.ttinclude文件 <#@ assembly name="System.Core"#> <#@ assembly nam ...
- Codeforces 803G Periodic RMQ Problem 线段树
Periodic RMQ Problem 动态开点线段树直接搞, 我把它分成两部分, 一部分是原来树上的, 一部分是后来染上去的,两个部分取最小值. 感觉有点难写.. #include<bits ...
- Java版统计文件中的每个单词出现次数
正则表达式之Pattern和Matcher,请参见转载博客 http://www.cnblogs.com/haodawang/p/5967219.html 代码实现: import java.i ...
- JavaEE 之 Spring(一)
1.Spring a.作用:降低组件与组件之间的关联,便于系统的维护和拓展 b.核心思想: ①IOC:控制反转——配置文件依赖注入 ②AOP:面向切面编程 2.IOC/DI a.建配置文件 <? ...
- Java 之 JQuery
1.JQuery a.定义:jQuery 是一个 JavaScript 库 b.作用:极大地简化了 JavaScript 编程 c.引入: <script src="jquery.js ...
- RBF:RBF基于近红外光谱的汽油辛烷值含量预测结果对比—Jason niu
load spectra_data.mat temp = randperm(size(NIR,1)); P_train = NIR(temp(1:50),:)'; T_train = octane(t ...
- c++字符串string的操作
#include <iostream> #include <cstring> #include <string> using namespace std; int ...
- 004.NTP多层级架设
一 环境需求 1.1 需求 User-client:局域网所有节点主机: IN-NTP Server:隐藏于局域网内部的NTP服务器: Border-NTP:边界NTP服务器,用于同步外部时钟,同时对 ...
- docker部署springboot项目
本文介绍一下docker如何部署springboot项目. 前提条件: 1.可以运行jar包的环境 2.机器上已经安装了docker 3.准备部署的springboot的jar包 4.Dockerfi ...
- .net3.5 支持tuple
添加下面引用即可: https://github.com/SaladLab/NetLegacySupport