js event 冒泡和捕获事件详细介绍【转】
冒泡和捕获
- 冒泡: 事件从内向外,从下向上执行 (默认行为)
- 捕获: 事件从外向内,从上向下执行
vue之capture 捕获事件
capture.html
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>capture</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>
<style type="text/css">
div {
width: 400px;
} .pinkBorder {
border: 1px solid;
border-color: blue;
}
</style>
</head> <body>
<!-- 根据冒泡原则,点击id4时,正常情况应该按序弹出id4,id3,id2,id1
但因为id1,id2配置了.capture, 所以id1,id2这两个变成了捕获事件, 优先触发,
于是先执行id1,id2捕获, 再执行id4,id3冒泡, 最终按序弹出id1,id2,id4,id3 -->
<div id="app">
<div id="id1" class='pinkBorder' v-on:click.capture="doit">
id1
<div id="id2" class='pinkBorder' v-on:click.capture="doit">
id2
<div id="id3" class='pinkBorder' v-on:click="doit">
id3
<div id="id4" class='pinkBorder' v-on:click="doit">
id4(点我最终按序弹出id1,id2,id4,id3)
</div>
</div>
</div>
</div> </div> </body>
<script> var app = new Vue({
el: "#app",
data: {
id: ''
},
methods: {
doit: function () {
this.id = event.currentTarget.id;
alert(this.id)
}
}
}) // vm.greet();
</script> </html>
vue之self 自我事件
self.html
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>self</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>
<style type="text/css">
div {
width: 400px;
} .pinkBorder {
border: 1px solid;
border-color: green;
}
</style>
</head> <body> <!-- 根据冒泡原则,点击id4时,正常情况应该按序弹出id4,id3,id2,id1
但因为id2配置了.self,检测到不是自身,所以冒泡过程会跳过id2,最终按序弹出id4,id3,id1 -->
<div id="content">
<div id="id1" class='pinkBorder' v-on:click="doit">
id1
<div id="id2" class='pinkBorder' v-on:click.self="doit">
id2
<div id="id3" class='pinkBorder' v-on:click="doit">
id3
<div id="id4" class='pinkBorder' v-on:click="doit">
id4(点我按序弹出id4,id3,id1) </div>
</div>
</div>
</div>
</div> </body>
<script> var content = new Vue({
el: "#content",
data: {
id: ''
},
methods: {
doit: function () {
this.id = event.currentTarget.id;
alert(this.id)
}
}
}) // vm.greet();
</script> </html>
vue之stop 阻止事件
self.html
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>stop</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>
<style type="text/css">
div {
width: 400px;
} .pinkBorder {
border: 1px solid;
border-color: green;
}
</style>
</head> <body>
<!-- https://cn.vuejs.org/v2/guide/events.html#事件修饰符 -->
<!-- 根据冒泡原则,点击id4时,正常情况应该按序弹出id4,id3,id2,id1
但因为id2配置了.stop,所以冒泡事件在id2之后终止,最终按序弹出id4,id3,id2 -->
<div id="content">
<div id="id1" class='pinkBorder' v-on:click="doit">
id1
<div id="id2" class='pinkBorder' v-on:click.stop="doit">
id2 (v-on:click.stop)
<div id="id3" class='pinkBorder' v-on:click="doit">
id3
<div id="id4" class='pinkBorder' v-on:click="doit">
id4(点我按序弹出id4,id3,id2 )
</div>
</div>
</div>
</div>
</div> </body>
<script> var content = new Vue({
el: "#content",
data: {
id: ''
},
methods: {
doit: function () {
this.id = event.currentTarget.id;
alert(this.id)
}
}
}) // vm.greet();
</script> </html>
参考
js之事件冒泡和事件捕获详细介绍==>https://www.jb51.net/article/42492.htm
js event 冒泡和捕获事件详细介绍【转】的更多相关文章
- [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播
-->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的oncl ...
- JS Event 鼠标拖拽事件
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
- js阻止冒泡和默认事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js时间冒泡，阻止事件冒泡
首先解释一下事件冒泡神什么, 在js中,假如在div中嵌套一个div 如 <style type="text/css"> #box1{width:500px;heigh ...
- js阻止冒泡和默认事件（默认行为）详解- jquery DefaultPrevented 函数
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
- javaScript系列：js中获取时间new Date()详细介绍
var myDate = new Date();myDate.getYear(); //获取当前年份(2位)myDate.getFullYear(); //获取完整的年份(4位,1970-????)m ...
- 电子表格控件Spreadsheet 对象方法事件详细介绍
1.ActiveCell:返回代表活动单元格的Range只读对象.2.ActiveSheet:返回代表活动工作表的WorkSheet只读对象.3.ActiveWindow:返回表示当前窗口的Windo ...
- js中获取时间new Date()详细介绍
var myDate = new Date();myDate.getYear(); //获取当前年份(2位)myDate.getFullYear(); //获取完整的年份(4位,1970-????)m ...
- js 获取时间 new Date()详细介绍
javaScript系列:js中获取时间new Date()详细介绍 (2012-03-31 09:54:25) 转载▼ 标签: js时间 new date() 字符类型 转换 分类: study-j ...
随机推荐
- FreeMarker example all in one
Pick up from http://demojava.iteye.com/blog/800204
- Oracle 和 SQLSERVER 重新获取统计信息的方法
1. Oracle 重新获取统计信息的命令 exec dbms_stats.gather_schema_stats(ownname =>) # 需要修改 ownername options 指定 ...
- 普通PC安装ESXi5.5以及以上的方法
原贴内容 With ESXi 5, ESX no longer uses MBR for boot, it has gone to GPT-based partitions instead. W ...
- 《ERP系统》客户信用及风控代码
1.风控核心代码: <?php namespace core\models; class SalesCustomersFacade extends \common\models\Base{ /* ...
- jquery为表格行添加上下移动画效果
为项目列表项添加上下移动动画.首先想使用jquery animate来做到这一点.但我用的是table和tr作为列表和列表项,但jquery动画方法不支持table里的tr(Animations ar ...
- CSS遮罩mask
前面的话 CSS遮罩是2008年4月由苹果公司添加到webkit引擎中的.遮罩提供一种基于像素级别的,可以控制元素透明度的能力,类似于png24位或png32位中的alpha透明通道的效果.本文将详细 ...
- BZOJ4259 残缺的字符串（FFT）
两个串匹配时相匹配的位置位置差是相同的,那么翻转一个串就变成位置和相同,卷积的形式. 考虑如何使用卷积体现两个位置能否匹配.一个暴力的思路是每次只考虑一种字符,将其在一个串中设为1,并在另一个串中将不 ...
- hdu 4417 Super Mario （主席树）
链接:http://acm.hdu.edu.cn/showproblem.php?pid=4417 题意: 给你段长为n的序列,有q个询问,每次询问区间[l.r]内有多少个数小于等于k 思路: 之前用 ...
- Shebang(#!)[转]
原博文 使用Linux或者unix系统的同学可能都对#!这个符号并不陌生,但是你真的了解它吗? 首先,这个符号(#!)的名称,叫做"Shebang"或者"Sha-bang ...
- 【转】cJSON 源码阅读笔记
前言 cjson 的代码只有 1000+ 行, 而且只是简单的几个函数的调用. 而且 cjson 还有很多不完善的地方, 推荐大家看完之后自己实现一个 封装好的功能完善的 cjson 程序. json ...