Vue2学习笔记:事件对象、事件冒泡、默认行为
1.事情对象
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="http://unpkg.com/vue/dist/vue.js"></script> <script type="text/javascript">
window.onload = function(){
var vm = new Vue({
el:'#box',
methods:{
show:function(event){
console.log(event); //event 这个就是事件对象了
}
}
});
}
</script>
</head>
<body>
<div id="box">
<input type="button" value="按钮" @click="show($event)">
</div>
</body>
</html>
通过show($event)把事件对象传到方法里
2.事件冒泡
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="http://unpkg.com/vue/dist/vue.js"></script> <script type="text/javascript">
window.onload = function(){
var vm = new Vue({
el:'#box',
methods:{
show:function(){
alert(1);
},
show1:function(){
alert(2);
}
}
});
}
</script>
</head>
<body>
<div id="box">
<div @click="show1()">
<input type="button" value="按钮" @click="show()">
</div>
</div>
</body>
</html>
点击按钮的话他会，执行show ,show1方法，依次弹出1，2。
怎么来阻止
<1> 利用我们上面讲过的event对象: event.cancelBubble = true; //这种就阻止了
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="http://unpkg.com/vue/dist/vue.js"></script> <script type="text/javascript">
window.onload = function(){
var vm = new Vue({
el:'#box',
methods:{
show:function(event){
alert(1);
event.cancelBubble = true;
},
show1:function(){
alert(2);
}
}
});
}
</script>
</head>
<body>
<div id="box">
<div @click="show1()">
<input type="button" value="按钮" @click="show($event)">
</div>
</div>
</body>
</html>
<2>利用vue的方法阻止冒泡：给HTML元素绑定click事件的时候，改为@click.stop="show()"
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="http://unpkg.com/vue/dist/vue.js"></script> <script type="text/javascript">
window.onload = function(){
var vm = new Vue({
el:'#box',
methods:{
show:function(event){
alert(1);
//event.cancelBubble = true;
},
show1:function(){
alert(2);
}
}
});
}
</script>
</head>
<body>
<div id="box">
<div @click="show1()">
<input type="button" value="按钮" @click.stop="show()">
</div>
</div>
</body>
</html>
3.默认行为
比如contextmenu右键菜单
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<!-- // <script src="vue.js"></script> -->
<script src="http://unpkg.com/vue/dist/vue.js"></script> <script type="text/javascript">
window.onload = function(){
var vm = new Vue({
el:'#box',
methods:{
show:function(){
alert(1);
},
show1:function(){
alert(2);
}
}
});
}
</script>
</head>
<body>
<div id="box">
<input type="button" value="按钮" @contextmenu="show()">
<input type="button" value="按钮1" @contextmenu.prevent="show1()"> <p>//按钮右击点下去会依次出现 弹窗 1， 还有右击的默认菜单</p>
<p>//按钮1右击只出现 弹窗 2</p>
</div>
</body>
</html>
Vue2学习笔记:事件对象、事件冒泡、默认行为的更多相关文章
- vue教程1-05 事件 简写、事件对象、冒泡、默认行为、键盘事件
vue教程1-05 事件 简写.事件对象.冒泡.默认行为.键盘事件 v-on:click/mouseover...... 简写的: @click="" 推荐 事件对象: @clic ...
- iOS学习笔记之触摸事件&UIResponder
iOS学习笔记之触摸事件&UIResponder 触摸事件 与触摸事件相关的四个方法如下: 一根手指或多根手指触摸屏幕 -(void)touchesBegan:(NSSet *)touches ...
- 简单总结焦点事件、Event事件对象、冒泡事件
每学习一些新的东西,要学会复习,总结和记录. 今天来简单总结一下学到的几个事件:焦点事件.Event事件对象.冒泡事件 其实这几个事件应该往深的说是挺难的,但今天主要是以一个小菜的角度去尝试理解一些基 ...
- Python学习笔记_Python对象
Python学习笔记_Python对象 Python对象 标准类型 其它内建类型 类型对象和type类型对象 Python的Null对象None 标准类型操作符 对象值的比較 对象身份比較 布尔类型 ...
- vue事件对象、冒泡、阻止默认行为
事件对象: <input type="button" name="" value="按钮" @click="show($ev ...
- Vue2.0学习笔记：Vue事件修饰符的使用
事件处理 如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到methods中的方法中. 在Vue中,事件修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间 ...
- 微信小程序学习笔记二 数据绑定 + 事件绑定
微信小程序学习笔记二 1. 小程序特点概述 没有DOM 组件化开发: 具备特定功能效果的代码集合 体积小, 单个压缩包体积不能大于2M, 否则无法上线 小程序的四个重要的文件 *js *.wxml - ...
- 【zepto学习笔记03】事件机制
前言 我们今天直接进入事件相关的学习,因为近期可能会改到里面的代码就zepto来说,我认为最重要的就是选择器与事件相关了,随着浏览器升级,选择器简单了,而事件相关仍然是核心,今天我们就来学习学习 ze ...
- JS高级程序设计学习笔记之JS事件（1）
事件流 冒泡 定义:事件开始时由最具体的元素接收,然后逐级上传到较为不具体的节点.(IE9.FF.Chrome.Safari会将事件一直冒泡到window对象.IE5.5及其以下会跳过<html ...
随机推荐
- Oracle 中分组排序取值的问题
整理一下排序: 建表语句:create table EXAM( name VARCHAR2(32), subject VARCHAR2(32), score INTEGER)数据:IN ...
- ELK日志系统之通用应用程序日志接入方案
前边有两篇ELK的文章分别介绍了MySQL慢日志收集和Nginx访问日志收集,那么各种不同类型应用程序的日志该如何方便的进行收集呢?且看本文我们是如何高效处理这个问题的 日志规范 规范的日志存放路径和 ...
- vue 分享知识点
vue 分享模块清单 1.Vue 2.0之Vue实例和生命周期 2.vue 2.0之自定义指令 3.vue 2.0之观察者模式实现简单异步无限滚动 4.从JavaScript属性描述器剖析Vue.js ...
- 页面常见布局以及实现方法--flex
页面布局是前端工程师的基本功之一,总结分析各种布局实现方法,可以让自己快速定位哪种方法实现功能,同时可以做到现最大程度的兼容. 一.水平居中 假设:最基本机构 .parent>.child 1. ...
- 微信小程序之特殊效果及功能
一.下拉刷新效果 假设页面为index文件,那么代码如下: index.json: { "enablePullDownRefresh": true } index.js: //下拉 ...
- synchronized实现可见性
JMM关于synchronized的两条规定: 1)线程解锁前,必须把共享变量的最新值刷新到主内存中 2)线程加锁时,将清空工作内存中共享变量的值,从而使用共享变量时需要从主内存中重新获取最新的值 ( ...
- javascript中字符串常用操作总结
String对象属性 (1) length属性 length算是字符串中非常常用的一个属性了,它的功能是获取字符串的长度.当然需要注意的是js中的中文每个汉字也只代表一个字符,这里可能跟其他语言有些不 ...
- [日常] MySQL内存不足启动失败的解决方法
1.启动mysql时,一直不成功,查看错误日志 /var/log/mysql/error.log 2.主要的错误信息有如下几条: [ERROR] InnoDB: mmap(136151040 byte ...
- [转] PHP读取HTTP接口如何处理超时
原文地址:https://www.jianshu.com/p/446ea7aaea86 最近在工作中遇到一个读取 HTTP 接口慢的问题(使用的是 PHP 服务器端语言),所以想谈谈服务器端读取外部资 ...
- Linux：网络工具 nc
虽然叫nc不过用起来非常方便. 选项 - Use IPv4 only - Use IPv6 only -U, --unixsock Use Unix domain sockets only -C, - ...