vue2.0 中事件处理心得
来源:互联网 发布:淘宝客厅装饰物 编辑:程序博客网 时间:2024/06/06 03:45
<!-- self 只是作用在当前的元素上,子元素不出发该函数 --> <div class="pick-bg" v-show="childselectArea" @click.self="cancelClick"> <div class="pick-com"> <div class="dp-header"> <div class="dp-item dp-left vux-datetime-cancel" data-role="cancel" @click="cancelClick">取消</div> <!-- stop 阻止事件的冒泡 --> <div class="dp-item dp-right vux-datetime-confirm" data-role="confirm" @click.stop="sureClick">确定</div> </div> <picker :data='addressList' :fixed-columns="columns" :columns="3" v-model='selectAddList' @on-change='change' ref="picker"></picker> </div> </div>
事件捕获
- 含义:从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发,也就是说事件从最上一级元素开始往下查找,直到捕获到事件目标(target)。
直白点:事件触发顺序 父元素->子元素
事件冒泡
- 含义:从最不精确的对象(document 对象)开始触发,然后到最精确对象(也可以在窗口级别捕获事件,不过必须由开发人员特别指定),也就是说事件从事件目标(target)开始,往上冒泡直到页面的最上一级元素。
直白点:事件触发顺序 子元素->父元素
事件冒泡和事件捕获-图解
Vue2.0中的capture
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script> <style> * { box-sizing: border-box; margin: 0; padding: 20px; transition: background 800ms; } ul { height: 100%; list-style: none; background: hsl(193, 66%, 85%); } li { height: 100%; background: hsl(193, 66%, 95%); } .highlight { background: red; } </style></head><body><div id="app"> <ul @click="callback($event)"> <li @click="callback($event)">One</li> <ul @click="callback($event)"> <li @click="callback($event)">Two</li> <ul @click="callback($event)"> <li @click="callback($event)">Three. Click Me!!!</li> </ul> </ul> </ul></div><script> var pause = 200; new Vue({ el: "#app", methods: { callback(event) { var ms = event.timeout = (event.timeout + pause) || 0; var target = event.currentTarget; console.log(target); setTimeout(function() { target.classList.add('highlight'); setTimeout(function() { target.classList.remove('highlight'); }, pause); }, ms); } } })</script></body></html>添加修饰符.capture后 在捕获阶段中监听事件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script> <style> * { box-sizing: border-box; margin: 0; padding: 20px; transition: background 800ms; } ul { height: 100%; list-style: none; background: hsl(193, 66%, 85%); } li { height: 100%; background: hsl(193, 66%, 95%); } .highlight { background: red; } </style></head><body><div id="app"> <ul @click="callback($event)"> <li @click="callback($event)">One</li> <ul @click="callback($event)"> <li @click="callback($event)">Two</li> <ul @click="callback($event)"> <li @click="callback($event)">Three. Click Me!!!</li> </ul> </ul> </ul></div><script> var pause = 200; new Vue({ el: "#app", methods: { callback(event) { var ms = event.timeout = (event.timeout + pause) || 0; var target = event.currentTarget; console.log(target); setTimeout(function() { target.classList.add('highlight'); setTimeout(function() { target.classList.remove('highlight'); }, pause); }, ms); } } })</script></body></html>
添加修饰符.capture后 在捕获阶段中监听事件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script> <style> * { box-sizing: border-box; margin: 0; padding: 20px; transition: background 800ms; } ul { height: 100%; list-style: none; background: hsl(193, 66%, 85%); } li { height: 100%; background: hsl(193, 66%, 95%); } .highlight { background: red; } </style></head><body><div id="app"> <ul @click="callback($event)"> <li @click="callback($event)">One</li> <ul @click="callback($event)"> <li @click="callback($event)">Two</li> <ul @click="callback($event)"> <li @click="callback($event)">Three. Click Me!!!</li> </ul> </ul> </ul></div><script> var pause = 200; new Vue({ el: "#app", methods: { callback(event) { var ms = event.timeout = (event.timeout + pause) || 0; var target = event.currentTarget; console.log(target); setTimeout(function() { target.classList.add('highlight'); setTimeout(function() { target.classList.remove('highlight'); }, pause); }, ms); } } })</script></body></html>
在Vue.js中,我们用修饰符来达到事件监听是捕获还是冒泡阶段中监听的效果。
阅读全文
0 0
- vue2.0 中事件处理心得
- vue2.0心得感悟
- vue2.0键盘事件
- vue2.0 transition -- 动画使用心得
- window.createPopup窗口中事件的处理心得
- java心得--GUI事件处理
- Vue2.0 事件发射与接收
- Vue2.0 事件发射与接收
- Vue2.0 事件发射与接收
- Vue2.0使用总结中......
- vue2.0 中上传文件
- vue2.0中使用sass
- vue2中(路由/父子/组件/事件)数据通信方法总结
- Vue2中的键盘事件
- Vue2中的键盘事件
- Vue2中的键盘事件
- 第三章:vue2中关于数据的处理
- vue2.0中Ajax库(axios)
- odbccp32.lib(dllload.obj) : error LNK2019: __imp___vsnprintf,该符号在函数 _StringVPrintfWorkerA@20 中被引用
- hdu2087(剪花布条) KMP算法
- 基于MFC的五子棋应用(三)
- 面向对象中的类和接口的理解
- 36. Valid Sudoku
- vue2.0 中事件处理心得
- Saruman's Army
- angular入门3
- 开发软件下载资源
- angular入门4
- BZOJ 5043: 密码破译 dp
- 拼图游戏二次开发心得
- java逻辑运算符、java基本语句(一)
- php imagecreatefrom* 系列函数重建图片时,产生的CRC error